feat(all): sync 0.7.0

package.json

@@ -63,7 +63,7 @@
     "file-saver": "^1.3.8",
     "marked": "^0.3.19",
     "ng-github-button": "^1.0.0",
-    "ng-zorro-antd": "^0.7.0-beta.5",
+    "ng-zorro-antd": "^0.7.0",
     "ngx-ace-wrapper": "^6.0.0",
     "ngx-color": "^1.3.1",
     "ngx-countdown": "^3.0.0",

packages/form/src/schema/index.ts

@@ -191,8 +191,8 @@ export interface SFSchema {
    * - `date`、`full-date` 日期，渲染为 `date`
    * - `time`、`full-time` 时间，渲染为 `time`
    * - `email` Email格式，渲染为 `autocomplete`
-   * - 非标准：`week`，渲染为 `date`
-   * - 非标准：`month`，渲染为 `date`
+   * - 非标准：`week`，渲染为 `nz-week-picker`
+   * - 非标准：`month`，渲染为 `nz-month-picker`
    * - `ip` IP地址，渲染为 `input`
    * - `uri` URL地址，渲染为 `upload`
    * - `regex` 正则表达式，必须指定 `pattern` 属性，渲染为 `input`

packages/form/src/utils.ts

@@ -5,13 +5,13 @@ import { SFUISchema, SFUISchemaItem, SFUISchemaItemRun } from './schema/ui';
 import { SFSchema, SFSchemaDefinition, SFSchemaEnum } from './schema';
 
 export const FORMATMAPS = {
-  'date-time': { widget: 'date' },
-  date: { widget: 'date' },
-  'full-date': { widget: 'date' },
+  'date-time': { widget: 'date', showTime: true, format: 'YYYY-MM-DDTHH:mm:ssZ' },
+  date: { widget: 'date', format: 'YYYY-MM-DD' },
+  'full-date': { widget: 'date', format: 'YYYY-MM-DD' },
   time: { widget: 'time' },
   'full-time': { widget: 'time' },
-  week: { widget: 'date' },
-  month: { widget: 'date' },
+  week: { widget: 'date', mode: 'week', format: 'YYYY-WW' },
+  month: { widget: 'date', mode: 'month', format: 'YYYY-MM' },
   uri: { widget: 'upload' },
   email: { widget: 'autocomplete', type: 'email' },
   '': { widget: 'string' },

packages/form/src/widgets/date/date.widget.ts

@@ -12,49 +12,146 @@ const DEFAULTFORMAT = 'YYYY-MM-DD HH:mm:ss';
   selector: 'sf-date',
   template: `
   <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
+    <ng-container [ngSwitch]="mode">
 
-    <input nz-input
-      [attr.id]="id"
-      [disabled]="disabled"
-      [nzSize]="ui.size"
-      [value]="displayValue"
-      (input)="_change($event.target?.value)"
-      [attr.type]="type"
-      [attr.placeholder]="ui.placeholder"
-      autocomplete="off">
+      <nz-month-picker *ngSwitchCase="'month'"
+        [nzDisabled]="disabled"
+        [nzSize]="ui.size"
+        [nzFormat]="displayFormat"
+        [(ngModel)]="displayValue"
+        (ngModelChange)="_change($event)"
+        [nzAllowClear]="i.allowClear"
+        [nzClassName]="ui.className"
+        [nzDisabledDate]="ui.disabledDate"
+        [nzLocale]="ui.locale"
+        [nzPlaceholder]="ui.placeholder"
+        [nzPopupStyle]="ui.popupStyle"
+        [nzDropdownClassName]="ui.dropdownClassName"
+        (nzOnOpenChange)="_openChange($event)"
+        [nzRenderExtraFooter]="ui.renderExtraFooter"
+      ></nz-month-picker>
+
+      <nz-week-picker *ngSwitchCase="'week'"
+        [nzDisabled]="disabled"
+        [nzSize]="ui.size"
+        [nzFormat]="displayFormat"
+        [(ngModel)]="displayValue"
+        (ngModelChange)="_change($event)"
+        [nzAllowClear]="i.allowClear"
+        [nzClassName]="ui.className"
+        [nzDisabledDate]="ui.disabledDate"
+        [nzLocale]="ui.locale"
+        [nzPlaceholder]="ui.placeholder"
+        [nzPopupStyle]="ui.popupStyle"
+        [nzDropdownClassName]="ui.dropdownClassName"
+        (nzOnOpenChange)="_openChange($event)"
+      ></nz-week-picker>
+
+      <nz-range-picker *ngSwitchCase="'range'"
+        [nzDisabled]="disabled"
+        [nzSize]="ui.size"
+        [nzFormat]="displayFormat"
+        [(ngModel)]="displayValue"
+        (ngModelChange)="_change($event)"
+        [nzAllowClear]="i.allowClear"
+        [nzClassName]="ui.className"
+        [nzDisabledDate]="ui.disabledDate"
+        [nzLocale]="ui.locale"
+        [nzPlaceholder]="ui.placeholder"
+        [nzPopupStyle]="ui.popupStyle"
+        [nzDropdownClassName]="ui.dropdownClassName"
+        (nzOnOpenChange)="_openChange($event)"
+        [nzDisabledTime]="ui.disabledTime"
+        [nzRenderExtraFooter]="ui.renderExtraFooter"
+        [nzRanges]="ui.ranges"
+        (nzOnOk)="_ok($event)"
+      ></nz-range-picker>
+
+      <nz-date-picker *ngSwitchDefault
+        [nzDisabled]="disabled"
+        [nzSize]="ui.size"
+        [nzFormat]="displayFormat"
+        [(ngModel)]="displayValue"
+        (ngModelChange)="_change($event)"
+        [nzAllowClear]="i.allowClear"
+        [nzClassName]="ui.className"
+        [nzDisabledDate]="ui.disabledDate"
+        [nzLocale]="ui.locale"
+        [nzPlaceholder]="ui.placeholder"
+        [nzPopupStyle]="ui.popupStyle"
+        [nzDropdownClassName]="ui.dropdownClassName"
+        (nzOnOpenChange)="_openChange($event)"
+        [nzDisabledTime]="ui.disabledTime"
+        [nzRenderExtraFooter]="ui.renderExtraFooter"
+        [nzShowTime]="ui.showTime"
+        [nzShowToday]="i.showToday"
+        (nzOnOk)="_ok($event)"
+      ></nz-date-picker>
+    </ng-container>
 
   </sf-item-wrap>
   `,
   preserveWhitespaces: false,
 })
 export class DateWidget extends ControlWidget implements OnInit {
-  type: string;
-  displayValue: string;
+  mode: string;
+  displayValue: Date | Date[] = null;
+  displayFormat: string;
   format: string;
+  i: any;
 
   ngOnInit(): void {
-    this.type = this.schema.format === 'date-time' ? 'datetime-local' : 'date';
-    this.format =
-      !this.ui.format && this.schema.format
-        ? DATEFORMAT[this.schema.format] || 'YYYY-MM-DD'
-        : this.ui.format;
+    const ui = this.ui;
+    this.mode = ui.mode || 'date';
+    if (!ui.displayFormat) {
+      switch (this.mode) {
+        case 'month':
+          this.displayFormat = `yyyy-MM`;
+          break;
+        case 'week':
+          this.displayFormat = `yyyy-ww`;
+          break;
+      }
+    }
+    this.format = ui.format
+      ? ui.format
+      : this.schema.type === 'number'
+        ? 'x'
+        : 'YYYY-MM-DD HH:mm:ss';
+    // 公共API
+    this.i = {
+      allowClear: ui.allowClear || true,
+      // nz-date-picker
+      showToday: ui.showToday || true
+    };
   }
 
   reset(value: any) {
-    this.formatDisplay(value);
+    if (
+      (Array.isArray(value) && value.length > 0 && value[0] instanceof Date) ||
+      value instanceof Date
+    ) {
+      this.displayValue = value;
+    }
   }
 
-  private formatData(value: string, formatString: string) {
-    return format(value, formatString, { locale: (window as any).__locale__ });
+  _change(value: Date | Date[]) {
+    if (value == null) {
+      this.setValue(null);
+      return;
+    }
+    this.setValue(
+      Array.isArray(value)
+        ? value.map(d => format(d, this.format))
+        : format(value, this.format),
+    );
   }
 
-  private formatDisplay(value: any) {
-    // TODO：HTML 原生日期组件无法按 `displayFormat` 格式，暂时停用以下代码
-    // this.displayValue = this.formatData(value, this.ui.displayFormat || DEFAULTFORMAT);
+  _openChange(status: boolean) {
+    if (this.ui.onOpenChange) this.ui.onOpenChange(status);
   }
 
-  _change(value: string) {
-    this.formatDisplay(value);
-    this.setValue(this.formatData(value, this.format || DEFAULTFORMAT));
+  _ok(value: any) {
+    if (this.ui.onOk) this.ui.onOk(status);
   }
 }

packages/form/src/widgets/date/demo/simple.md

@@ -20,30 +20,43 @@ import { SFSchema } from '@delon/form';
 
 @Component({
   selector: 'app-demo',
-  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)"
+  (formChange)="change($event)"></sf>`
 })
 export class DemoComponent {
-    schema: SFSchema = {
-        properties: {
-            'datetime': {
-                'type': 'string',
-                'format': 'date-time'
-            },
-            'date': {
-                'type': 'string',
-                'format': 'date'
-            },
-            'date_number': {
-                'type': 'number',
-                ui: { widget: 'date' }
-            },
-            'date_string': {
-                'type': 'string',
-                ui: { widget: 'date' }
-            }
-        }
-    };
-    constructor(public msg: NzMessageService) { }
-    submit(value: any) { this.msg.success(JSON.stringify(value)); }
+  schema: SFSchema = {
+    properties: {
+      'datetime': {
+          'type': 'string',
+          'format': 'date-time'
+      },
+      'date': {
+          'type': 'string',
+          'format': 'date'
+      },
+      'date_number': {
+          'type': 'number',
+          ui: { widget: 'date' }
+      },
+      'month': {
+          'type': 'string',
+          'format': 'month'
+      },
+      'week': {
+          'type': 'string',
+          'format': 'week'
+      },
+      'range': {
+          'type': 'string',
+          ui: { widget: 'date', mode: 'range' }
+      }
+    }
+  };
+  constructor(public msg: NzMessageService) { }
+  submit(value: any) { this.msg.success(JSON.stringify(value)); }
+
+  change(value: any) {
+    console.log('change', value);
+  }
 }
 ```

packages/form/src/widgets/date/index.md

@@ -8,18 +8,17 @@ type: Widgets
 
 ## 注意事项
 
-- 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据
-- 所有格式化单位，参考 [date-fns format](https://date-fns.org/v1.29.0/docs/format)（国内镜像：[moment format](http://momentjs.cn/docs/#/displaying/format/)）
-- 部分格式化单位需要依赖国际化，则**务必**使用指定 `window.__locale__` 表示当前 Date fns 使用的国际化数据，更多细节见[国际化](/docs/i18n)
+- 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据（等同 [nzFormat](https://ng.ant.design/components/date-picker/zh#api) 值）
+- 所有 **数据格式化** 单位，参考 [date-fns format](https://date-fns.org/v1.29.0/docs/format)（国内镜像：[moment format](http://momentjs.cn/docs/#/displaying/format/)）
 - 指定 `schema.format` 则必须遵守 [RFC3339](https://tools.ietf.org/html/rfc3339#section-5.6) 时间格式，否则都视为格式错误，默认的数据格式化：
-    - `date-time` 默认 `YYYY-MM-DDTHH:mm:ssZ`，注意这里采用的是 `type="datetime-local"` 因此会涉及到**时区问题**
-    - `date`、`full-date` 默认 `YYYY-MM-DD`
-    - `time`、`full-time` 默认 `HH:mm:ss`
-    - 非标准：`week` 默认 `YYYY-Wo`
-    - 非标准：`month` 默认 `YYYY-MM`
+  - `date-time` 默认 `YYYY-MM-DDTHH:mm:ssZ`，注意这里采用的是 `type="datetime-local"` 因此会涉及到**时区问题**
+  - `date`、`full-date` 默认 `YYYY-MM-DD`
+  - `time`、`full-time` 默认 `HH:mm:ss`
+  - 非标准：`week` 默认 `YYYY-WW`
+  - 非标准：`month` 默认 `YYYY-MM`
 - 不指定 `schema.format` 根据 `schema.type` 值按以下规则处理（允许通过 `DelonFormConfig` 替换）数据格式化：
-    - `string` 默认 `YYYY-MM-DD HH:mm:ss`
-    - `number` 默认 `x` 13位Unix Timestamp
+  - `string` 默认 `YYYY-MM-DD HH:mm:ss`
+  - `number` 默认 `x` 13位Unix Timestamp
 
 ## API
 
@@ -32,9 +31,22 @@ format | 数据格式类型  | `string` | -
 
 ### ui 属性
 
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-size | 大小，等同 `nzSize` | `string` | -
+参数        | 说明                   | 类型     | 默认值
+------------|------------------------|----------|--------
+size        | 大小，等同 `nzSize`     | `string` | -
 placeholder | 在文字框中显示提示讯息 | `string` | -
-format | 数据格式化 | `string` | -
-displayFormat | 显示格式化，默认：`YYYY-MM-DD HH:mm:ss` | `string` | -
+format      | 数据格式化             | `string` | -
+displayFormat | 显示格式化，（等同 [nzFormat](https://ng.ant.design/components/date-picker/zh#api) 值） | `string` | `yyyy-MM-dd HH:mm:ss`
+allowClear | 是否显示清除按钮 | `boolean` | `true`
+className | 选择器 className | `string` | -
+disabledDate | 不可选择的日期 | `(current: Date) => boolean` | -
+locale | 国际化配置 | `object` | -
+popupStyle | 额外的弹出日历样式 | `object` | -
+dropdownClassName | 额外的弹出日历 className | `string` | -
+onOpenChange | 弹出日历和关闭日历的回调 | `(status: boolean) => void` | -
+disabledDate | 不可选择的日期 | `(current: Date) => boolean` | -
+disabledTime | 不可选择的时间 | `(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | -
+renderExtraFooter | 在面板中添加额外的页脚 | `string` | -
+showTime | 增加时间选择功能 | `boolean` | `true`
+showToday | 是否展示“今天”按钮 | `boolean` | `true`
+onOk | 点击确定按钮的回调	 | `(data: Data | Data[]) => void` | -

packages/form/src/widgets/time/index.md

@@ -8,8 +8,8 @@ type: Widgets
 
 ## 注意事项
 
-- 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据
-- 所有格式化单位，参考 [date-fns format](https://date-fns.org/v1.29.0/docs/format)（国内镜像：[moment format](http://momentjs.cn/docs/#/displaying/format/)）
+- 格式化分为：**数据格式化**表示表单数据和**显示格式化**显示数据（等同 [nzFormat](https://ng.ant.design/components/time-picker/zh#api) 值）
+- 所有 **数据格式化** 单位，参考 [date-fns format](https://date-fns.org/v1.29.0/docs/format)（国内镜像：[moment format](http://momentjs.cn/docs/#/displaying/format/)）
 - 指定 `schema.format` 则必须遵守 [RFC3339](https://tools.ietf.org/html/rfc3339#section-5.6) 时间格式，否则都视为格式错误，默认的数据格式化：
   - `time`、`full-time` 默认 `HH:mm:ss`
 - 不指定 `schema.format` 根据 `schema.type` 值按以下规则处理（允许通过 `DelonFormConfig` 替换）数据格式化：
@@ -33,7 +33,7 @@ format | 数据格式类型  | `string` | -
 | size | 大小，等同 `nzSize` | `string` | - |
 | placeholder | 在文字框中显示提示讯息 | `string` | - |
 | format | 数据格式化 | `string` | `HH:mm:ss` |
-| displayFormat | 显示格式化，等同 `nzFormat` | `string` | `HH:mm:ss` |
+| displayFormat | 显示格式化，（等同 [nzFormat](https://ng.ant.design/components/time-picker/zh#api) 值） | `string` | `HH:mm:ss` |
 | utcEpoch | 是否UTC新纪元（表示从 `1970` 开始计毫秒数），当 `type='number'` 时有效 | `boolean` | `false` |
 | allowEmpty | 是否展示清除按钮 | `boolean` | `true` |
 | clearText | 清除按钮的提示文案 | `string` | `清除` |

packages/schematics/application/index.ts

@@ -148,7 +148,7 @@ function addCodeStylesToPackageJson() {
     if (json == null) return host;
     json.scripts['precommit'] = `npm run lint-staged`;
     json.scripts['lint'] = `npm run lint:ts && npm run lint:style`;
-    json.scripts['lint:ts'] = `ng lint`;
+    json.scripts['lint:ts'] = `tslint -p src/tsconfig.app.json -c tslint.json 'src/**/*.ts'`;
     json.scripts['lint:style'] = `stylelint \"{src}/**/*.less\" --syntax less`;
     json.scripts['lint-staged'] = `lint-staged`;
     json.scripts['tslint-check'] = `tslint-config-prettier-check ./tslint.json`;