From e9706352740c4f7083941687473bc8f672668a56 Mon Sep 17 00:00:00 2001 From: cipchk Date: Fri, 27 Apr 2018 19:23:59 +0800 Subject: [PATCH] docs: a happy day --- .angular-cli.json | 3 +- docs/acl.md | 6 +- docs/architecture.md | 16 +-- docs/auth.md | 4 +- docs/changelog-81.md | 2 +- docs/changelog.md | 26 ++--- docs/cli.md | 11 +++ docs/common.md | 4 +- docs/deploy.md | 4 + docs/getting-started.md | 10 +- docs/graph.md | 4 +- docs/how-to-start.md | 2 +- docs/scaffold.md | 6 +- docs/server.md | 8 +- docs/theme.md | 2 +- docs/upgrade.md | 11 ++- docs/use-components-alone.md | 2 +- packages/abc/avatar-list/index.md | 1 - packages/abc/charts/index.md | 1 - packages/abc/count-down/index.md | 1 - packages/abc/desc-list/index.md | 1 - packages/abc/down-file/index.md | 1 - packages/abc/ellipsis/index.md | 1 - packages/abc/error-collect/index.md | 1 - packages/abc/exception/index.md | 1 - packages/abc/footer-toolbar/index.md | 1 - packages/abc/full-content/index.md | 1 - packages/abc/global-footer/index.md | 1 - packages/abc/image/index.md | 1 - packages/abc/lodop/index.md | 1 - packages/abc/notice-icon/index.md | 1 - packages/abc/number-info/index.md | 1 - packages/abc/number-to-chinese/index.md | 1 - packages/abc/page-header/index.md | 1 - packages/abc/quick-menu/index.md | 1 - packages/abc/result/index.md | 1 - packages/abc/reuse-tab/index.md | 5 +- packages/abc/sidebar-nav/index.md | 1 - packages/abc/simple-table/index.md | 1 - packages/abc/standard-form-row/index.md | 1 - packages/abc/tag-select/index.md | 1 - packages/abc/trend/index.md | 1 - packages/abc/utils/index.md | 1 - packages/abc/xlsx/index.md | 1 - packages/abc/zip/index.md | 1 - packages/form/docs/customize.md | 6 +- packages/form/src/schema/index.ts | 2 +- .../form/src/widgets/array/demo/simple.md | 54 ++++++++++ packages/form/src/widgets/array/index.md | 35 +------ .../src/widgets/autocomplete/demo/simple.md | 56 +++++++++++ .../form/src/widgets/autocomplete/index.md | 40 +------- .../form/src/widgets/boolean/demo/simple.md | 46 +++++++++ packages/form/src/widgets/boolean/index.md | 28 +----- .../form/src/widgets/cascader/demo/simple.md | 99 +++++++++++++++++++ packages/form/src/widgets/cascader/index.md | 81 +-------------- .../form/src/widgets/checkbox/demo/simple.md | 70 +++++++++++++ packages/form/src/widgets/checkbox/index.md | 50 +--------- .../form/src/widgets/custom/demo/simple.md | 53 ++++++++++ packages/form/src/widgets/custom/index.md | 49 ++------- packages/form/src/widgets/date/demo/simple.md | 49 +++++++++ packages/form/src/widgets/date/index.md | 33 +------ .../form/src/widgets/mention/demo/simple.md | 66 +++++++++++++ packages/form/src/widgets/mention/index.md | 46 +-------- .../form/src/widgets/number/demo/simple.md | 35 +++++++ packages/form/src/widgets/number/index.md | 50 +--------- .../form/src/widgets/object/demo/simple.md | 41 ++++++++ packages/form/src/widgets/object/index.md | 23 +---- .../form/src/widgets/radio/demo/simple.md | 53 ++++++++++ packages/form/src/widgets/radio/index.md | 34 +------ packages/form/src/widgets/rate/demo/simple.md | 53 ++++++++++ packages/form/src/widgets/rate/index.md | 35 +------ .../form/src/widgets/select/demo/simple.md | 82 +++++++++++++++ packages/form/src/widgets/select/index.md | 63 +----------- .../form/src/widgets/select/select.widget.ts | 14 ++- .../form/src/widgets/slider/demo/simple.md | 51 ++++++++++ packages/form/src/widgets/slider/index.md | 6 +- .../form/src/widgets/string/demo/simple.md | 42 ++++++++ packages/form/src/widgets/string/index.md | 22 +---- packages/form/src/widgets/tag/demo/simple.md | 46 +++++++++ packages/form/src/widgets/tag/index.md | 28 +----- .../form/src/widgets/textarea/demo/simple.md | 41 ++++++++ packages/form/src/widgets/textarea/index.md | 23 +---- packages/form/src/widgets/time/demo/simple.md | 45 +++++++++ packages/form/src/widgets/time/index.md | 29 +----- .../form/src/widgets/transfer/demo/simple.md | 48 +++++++++ packages/form/src/widgets/transfer/index.md | 30 +----- .../form/src/widgets/upload/demo/simple.md | 64 ++++++++++++ packages/form/src/widgets/upload/index.md | 46 +-------- .../form/widgets-third/tinymce/demo/simple.md | 40 ++++++++ packages/form/widgets-third/tinymce/index.md | 20 +--- .../form/widgets-third/ueditor/demo/simple.md | 40 ++++++++ packages/form/widgets-third/ueditor/index.md | 20 +--- scripts/site/utils/generate-md.ts | 2 +- site/app/app.module.ts | 5 - site/app/core/code.service.ts | 32 +++++- .../components/docs/docs.component.html | 8 +- .../shared/components/docs/docs.component.ts | 47 +++++++-- .../route-transfer.directive.ts | 26 +++++ site/app/shared/shared.module.ts | 4 +- site/app/sw-updates/sw-updates.module.ts | 15 --- site/app/sw-updates/sw-updates.service.ts | 29 ------ site/site.config.js | 2 +- 102 files changed, 1459 insertions(+), 851 deletions(-) create mode 100644 packages/form/src/widgets/array/demo/simple.md create mode 100644 packages/form/src/widgets/autocomplete/demo/simple.md create mode 100644 packages/form/src/widgets/boolean/demo/simple.md create mode 100644 packages/form/src/widgets/cascader/demo/simple.md create mode 100644 packages/form/src/widgets/checkbox/demo/simple.md create mode 100644 packages/form/src/widgets/custom/demo/simple.md create mode 100644 packages/form/src/widgets/date/demo/simple.md create mode 100644 packages/form/src/widgets/mention/demo/simple.md create mode 100644 packages/form/src/widgets/number/demo/simple.md create mode 100644 packages/form/src/widgets/object/demo/simple.md create mode 100644 packages/form/src/widgets/radio/demo/simple.md create mode 100644 packages/form/src/widgets/rate/demo/simple.md create mode 100644 packages/form/src/widgets/select/demo/simple.md create mode 100644 packages/form/src/widgets/slider/demo/simple.md create mode 100644 packages/form/src/widgets/string/demo/simple.md create mode 100644 packages/form/src/widgets/tag/demo/simple.md create mode 100644 packages/form/src/widgets/textarea/demo/simple.md create mode 100644 packages/form/src/widgets/time/demo/simple.md create mode 100644 packages/form/src/widgets/transfer/demo/simple.md create mode 100644 packages/form/src/widgets/upload/demo/simple.md create mode 100644 packages/form/widgets-third/tinymce/demo/simple.md create mode 100644 packages/form/widgets-third/ueditor/demo/simple.md create mode 100644 site/app/shared/components/route-transfer/route-transfer.directive.ts delete mode 100644 site/app/sw-updates/sw-updates.module.ts delete mode 100644 site/app/sw-updates/sw-updates.service.ts diff --git a/.angular-cli.json b/.angular-cli.json index ad7e859f68..b535ada3be 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -63,8 +63,7 @@ "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" - }, - "serviceWorker": true + } }], "e2e": { "protractor": { diff --git a/docs/acl.md b/docs/acl.md index 11b7b14e5a..15d3871f39 100644 --- a/docs/acl.md +++ b/docs/acl.md @@ -4,7 +4,7 @@ title: ACL type: Advance --- -ACL 全称叫访问控制列表（Access Control List），是一种非常简单的基于角色权限控制方式，所以如果你需要它，则需要导入 `@delon/acl` 模块；另外你也可以在 [DEMO](//cipchk.github.io/ng-alain/#/logics/acl) 中体验它。 +ACL 全称叫访问控制列表（Access Control List），是一种非常简单的基于角色权限控制方式。一个完全独立 `@delon/acl` 模块（[DEMO](//cipchk.github.io/ng-alain/#/logics/acl)）。 ## 如何运行？ @@ -12,7 +12,7 @@ ACL 全称叫访问控制列表（Access Control List），是一种非常简单 ## 需求实例 -## 粒度 +### 粒度 ACL 提供一个用于改变按钮级别粒度的控制能力，例如：无权限者不允许显示列表页中的增加按钮。 @@ -85,4 +85,4 @@ const routes: Routes = [ ## 如何删除？ -见 [独立使用 ABC 组件](http://ng-alain.com/docs/use-components-alone)。 +见 [独立使用 ABC 组件](/docs/use-components-alone)。 diff --git a/docs/architecture.md b/docs/architecture.md index 5bd1d9092a..55252aaa68 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -56,11 +56,11 @@ ng-alain 脚手架是基于 Angular 和 ng-zorro-antd（Ant Design 的 Angular | package name | version | next version | | ------------ |:-----:|:----------:| -| @delon/theme | [![NPM version](https://img.shields.io/npm/v/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme) | [![NPM version](https://img.shields.io/npm/v/@delon/theme/next.svg)](https://www.npmjs.com/package/@delon/theme) | -| @delon/abc | [![NPM version](https://img.shields.io/npm/v/@delon/abc.svg)](https://www.npmjs.com/package/@delon/abc) | [![NPM version](https://img.shields.io/npm/v/@delon/abc/next.svg)](https://www.npmjs.com/package/@delon/abc) | -| @delon/form | [![NPM version](https://img.shields.io/npm/v/@delon/form.svg)](https://www.npmjs.com/package/@delon/form) | [![NPM version](https://img.shields.io/npm/v/@delon/form/next.svg)](https://www.npmjs.com/package/@delon/form) | -| @delon/acl | [![NPM version](https://img.shields.io/npm/v/@delon/acl.svg)](https://www.npmjs.com/package/@delon/acl) | [![NPM version](https://img.shields.io/npm/v/@delon/acl/next.svg)](https://www.npmjs.com/package/@delon/acl) | -| @delon/auth | [![NPM version](https://img.shields.io/npm/v/@delon/auth.svg)](https://www.npmjs.com/package/@delon/auth) | [![NPM version](https://img.shields.io/npm/v/@delon/auth/next.svg)](https://www.npmjs.com/package/@delon/auth) | -| @delon/mock | [![NPM version](https://img.shields.io/npm/v/@delon/mock.svg)](https://www.npmjs.com/package/@delon/mock) | [![NPM version](https://img.shields.io/npm/v/@delon/mock/next.svg)](https://www.npmjs.com/package/@delon/mock) | -| @delon/cache | [![NPM version](https://img.shields.io/npm/v/@delon/cache.svg)](https://www.npmjs.com/package/@delon/cache) | [![NPM version](https://img.shields.io/npm/v/@delon/cache/next.svg)](https://www.npmjs.com/package/@delon/cache) | -| @delon/cli | [![NPM version](https://img.shields.io/npm/v/@delon/cli.svg)](https://www.npmjs.com/package/@delon/cli) | [![NPM version](https://img.shields.io/npm/v/@delon/cli/next.svg)](https://www.npmjs.com/package/@delon/cli) | +| @delon/theme [/docs/theme](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/theme.svg)](https://www.npmjs.com/package/@delon/theme) | [![NPM version](https://img.shields.io/npm/v/@delon/theme/next.svg)](https://www.npmjs.com/package/@delon/theme) | +| @delon/abc [/components](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/abc.svg)](https://www.npmjs.com/package/@delon/abc) | [![NPM version](https://img.shields.io/npm/v/@delon/abc/next.svg)](https://www.npmjs.com/package/@delon/abc) | +| @delon/form [/form](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/form.svg)](https://www.npmjs.com/package/@delon/form) | [![NPM version](https://img.shields.io/npm/v/@delon/form/next.svg)](https://www.npmjs.com/package/@delon/form) | +| @delon/acl [/docs/acl](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/acl.svg)](https://www.npmjs.com/package/@delon/acl) | [![NPM version](https://img.shields.io/npm/v/@delon/acl/next.svg)](https://www.npmjs.com/package/@delon/acl) | +| @delon/auth [/docs/auch](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/auth.svg)](https://www.npmjs.com/package/@delon/auth) | [![NPM version](https://img.shields.io/npm/v/@delon/auth/next.svg)](https://www.npmjs.com/package/@delon/auth) | +| @delon/mock [/docs/mock](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/mock.svg)](https://www.npmjs.com/package/@delon/mock) | [![NPM version](https://img.shields.io/npm/v/@delon/mock/next.svg)](https://www.npmjs.com/package/@delon/mock) | +| @delon/cache [/docs/cache](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/cache.svg)](https://www.npmjs.com/package/@delon/cache) | [![NPM version](https://img.shields.io/npm/v/@delon/cache/next.svg)](https://www.npmjs.com/package/@delon/cache) | +| @delon/cli [/docs/cli](Document) | [![NPM version](https://img.shields.io/npm/v/@delon/cli.svg)](https://www.npmjs.com/package/@delon/cli) | [![NPM version](https://img.shields.io/npm/v/@delon/cli/next.svg)](https://www.npmjs.com/package/@delon/cli) | diff --git a/docs/auth.md b/docs/auth.md index 73de2ea15e..d7a184f0a7 100644 --- a/docs/auth.md +++ b/docs/auth.md @@ -95,9 +95,9 @@ this.socialService.login(`//github.com/login/oauth/authorize?xxxxxx`, '/', { // 1、默认根据当前URL地址 this.socialService.callback(); // 2、非 `{ useHash: true }` 路由 -this.socialService.callback(`http://ng-alain.com/callback?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1`); +this.socialService.callback(`/callback?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1`); // 3、带有 `{ useHash: true }` 路由 -this.socialService.callback(`http://ng-alain.com/?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1#/callback`); +this.socialService.callback(`/?token=40SOJV-L8oOwwUIs&name=cipchk&uid=1#/callback`); // 4、指定 `ITokenModel` 对象 this.socialService.callback({ token: '123456789', diff --git a/docs/changelog-81.md b/docs/changelog-81.md index d902555df5..10a0629245 100644 --- a/docs/changelog-81.md +++ b/docs/changelog-81.md @@ -10,7 +10,7 @@ type: Other `1.0.0-beta` 主要的变化是 `@delon/*` 系列业务组件的升级，其中这一部分并没有太多组件API的变动。反而尽可能在做一些减法，其主要包括： -- 移除十种主题色，改由动态[自定义主题](http://ng-alain.com/theme) +- 移除十种主题色，改由动态[自定义主题](/theme) - 移除 `forRoot()` 参数配置项，由 `provider` 统一配置，更易交付 - `@delon/abc` 部分组件名的修改，这一部分可以直接搜索替换完成 - `ng-zorro-antd-extra` 不再维护，指引后面有变动细节 diff --git a/docs/changelog.md b/docs/changelog.md index 3fae6e3414..ae9ac10582 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -114,7 +114,7 @@ type: Other - 脚手架 - 增加 Lodop 打印[示例页](https://cipchk.github.io/ng-alain/other/print) - @delon/abc - - 增加 [Lodop](http://ng-alain.com/components/lodop) 组件，最强打印插件 + - 增加 [Lodop](/components/lodop) 组件，最强打印插件 - 修复 `LazyService` 延迟加载资源的JS脚本的判断规则 - 修复 `Pip` 饼图 tooltip 百分比显示错误，[#331](https://github.com/cipchk/ng-alain/issues/331) - @delon/cli @@ -156,7 +156,7 @@ type: Other - @delon/abc - `number-to-chinese` 新增人民币转大写模块 - @delon/auth - - 新增 `SessionStorageStore`、`MemoryStore` 两种存储模式，见[API文档](http://ng-alain.com/docs/auth) + - 新增 `SessionStorageStore`、`MemoryStore` 两种存储模式，见[API文档](/docs/auth) - @delon/cache - 修复 `get` 方法已存在key时应该返回 Observable 类型，[#40](https://github.com/cipchk/delon/issues/40) - @delon/mock @@ -223,7 +223,7 @@ type: Other - 脚手架 - 修复切换语言时无同步更改标题问题，[#28](https://github.com/cipchk/delon/issues/28) ([80b0fce](https://github.com/cipchk/ng-alain/commit/80b0fce)) - @delon/abc - - 新增 `simple-table` 方法 `reset()`，用于[重置](http://ng-alain.com/components/simple-table#components-simple-table-form)表单 + - 新增 `simple-table` 方法 `reset()`，用于[重置](/components/simple-table#components-simple-table-form)表单 - 新增 `sidebar-nav` 小于 `992` 以下切换路由时自动关闭侧边栏 - 新增 `pro-header` 配置项，例如自定义 Home 内容 - 修复 `reuse-tab` 自定义标题错位问题，[#25](https://github.com/cipchk/delon/issues/25) [#247](https://github.com/cipchk/ng-alain/issues/247) @@ -319,13 +319,13 @@ type: Other - 修复 `ReuseTabService` 调用 `clear()`、`remove()` 时无法同步更新组件，[#191](https://github.com/cipchk/ng-alain/issues/191) - 优化包体大小 - @delon/acl - - 新增通用ACL路由守卫方法，[Document](http://ng-alain.com/docs/acl) + - 新增通用ACL路由守卫方法，[Document](/docs/acl) - @delon/cache - 修复无法设置有效期，[#190](https://github.com/cipchk/ng-alain/issues/190) - 修复 `tryGet` 无法返回 `Observalbe` 类型，[#15](https://github.com/cipchk/delon/issues/15) - 支持泛型，[#14](https://github.com/cipchk/delon/issues/14) - @delon/cli - - 基于 Angular Cli 向上构建的针对 ng-alain 脚手架的命令行工具，[Document](http://ng-alain.com/docs/cli) + - 基于 Angular Cli 向上构建的针对 ng-alain 脚手架的命令行工具，[Document](/docs/cli) ### 0.5.0 @@ -336,9 +336,9 @@ type: Other - @delon/theme - 修复快捷菜单项 `externalLink` 属性无效值问题，[#169](https://github.com/cipchk/ng-alain/issues/169) - @delon/abc - - 新增 `full-content` 全屏工作区组件，[Document](http://ng-alain.com/components/full-content) - - 新增 `zip` 组件，[Document](http://ng-alain.com/components/zip) - - 新增 `xlsx` 组件，[Document](http://ng-alain.com/components/xlsx) + - 新增 `full-content` 全屏工作区组件，[Document](/components/full-content) + - 新增 `zip` 组件，[Document](/components/zip) + - 新增 `xlsx` 组件，[Document](/components/xlsx) - `simple-table` 变更： - **BREAKING CHANGES** 列描述 `url` 属性由 `data` 代替，数据源统一一个属性名，`0.6.0` 后将移除 `url` 属性 - 新增列描述 `i18n` 属性，支持国际化 @@ -347,7 +347,7 @@ type: Other - 新增 `export()` 支持指定数组数据，[#162](https://github.com/cipchk/ng-alain/issues/162) - 优化 `tag-cloud` 云词组件 - @delon/mock - - Angular 里 Mock Http数据，适用于所有 Angular 项目，[Document](http://ng-alain.com/docs/mock) + - Angular 里 Mock Http数据，适用于所有 Angular 项目，[Document](/docs/mock) - @delon/auth - 修复Angular模块暂不支持正则参数（[#14187](https://github.com/angular/angular/issues/14187)）问题，[#170](https://github.com/cipchk/ng-alain/issues/170) @@ -399,7 +399,7 @@ type: Other `2017-12-24` - ng-alain 脚手架 - - 新增 [blank](//github.com/cipchk/ng-alain/tree/blank) 基础版分支，如何使用见[文档](http://ng-alain.com/docs/getting-started) + - 新增 [blank](//github.com/cipchk/ng-alain/tree/blank) 基础版分支，如何使用见[文档](/docs/getting-started) - 新增 [reuse-tab](https://cipchk.github.io/ng-alain/)、[simple-talbe](https://cipchk.github.io/ng-alain/tables/simple-table)、[UEditor](https://cipchk.github.io/ng-alain/editor/ueditor)、[Tinymce](https://cipchk.github.io/ng-alain/editor/tinymce)、[拆分视图](https://cipchk.github.io/ng-alain/other/split)、[剪贴板](https://cipchk.github.io/ng-alain/other/clipboard) 示例页 - 修复无法启动 HMR 问题，[#130](https://github.com/cipchk/ng-alain/issues/130) [Commit](https://github.com/cipchk/ng-alain/commit/fca17fe7f74303e70ee2cfbac4dac0e032d426f4) - 修复i18n加载顺序问题，[#138](https://github.com/cipchk/ng-alain/issues/138) @@ -415,8 +415,8 @@ type: Other - 修复由于无法获取 `token` 导致拦截器抛出异常 - 修复JWT拦截器无法获取过期值问题，[#8](https://github.com/cipchk/delon/issues/8) - @delon/abc - - 新增 `reuse-tab` 组件，解决不同路由页切换时组件数据不丢失问题，[Document](http://ng-alain.com/components/reuse-tab) - - 新增 `simple-talbe` 组件，利用配置快速构建表格数据，[Document](http://ng-alain.com/components/simple-table) + - 新增 `reuse-tab` 组件，解决不同路由页切换时组件数据不丢失问题，[Document](/components/reuse-tab) + - 新增 `simple-talbe` 组件，利用配置快速构建表格数据，[Document](/components/simple-table) - 修复 `sidebar-nav` 侧边栏收缩时无法自动隐藏及跳转问题，[#128](https://github.com/cipchk/ng-alain/issues/128) - 修复 `simple-table` 无法加载第一页问题，[#122](https://github.com/cipchk/ng-alain/issues/122) - 优化组件性能尽可能使用 `OnPush` 维护变更检测，[#115](https://github.com/cipchk/ng-alain/issues/115) @@ -461,7 +461,7 @@ type: Other - @delon/acl - 修复 `can()` 方法传递角色数组时总是返回 `false` - @delon/auth - - 认证类库：用户认证过程的解决方案，[Document](http://ng-alain.com/docs/auth) + - 认证类库：用户认证过程的解决方案，[Document](/docs/auth) ### 0.2.1 diff --git a/docs/cli.md b/docs/cli.md index 3a2e2a58a5..86828e2e97 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -6,6 +6,17 @@ title: type: Other --- +# [CREF] + +**安装&配置** 小节的实施对很多新手来说经常忽略了一些操作细节，导致遇到一些文件找不到问题。 + +最近，收到一个 [#60](https://github.com/cipchk/delon/issues/60) 可以极大简化安装 cli 过程，你可以优先尝试以下方法，若成功可以直接跳过 **安装&配置** 小节，反之希望你能把在实施下列所遇到的问题在 [#60](https://github.com/cipchk/delon/issues/60) 继续讨论。 + +```bash +yarn global add @angular/cli +yarn global add @delon/cli@next +``` + # 如何使用 `@delon/cli` 是基于 Angular Cli 向上构建的针对 ng-alain 脚手架的命令行工具，因此在安装之前要先确保以下类库应该安装： diff --git a/docs/common.md b/docs/common.md index a5c8261f26..6f9b5f98ad 100644 --- a/docs/common.md +++ b/docs/common.md @@ -12,7 +12,7 @@ ng-alain 提供若干常见的服务与Pipe管道，以便减少基础建设代 ### MenuService -菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/interface.ts) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。 +菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/packages/theme/services/menu/interface.ts) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。 **建议：** 在 Angular 启动服务（[startup.service.ts](//github.com/cipchk/ng-alain/blob/master/src/app/core/startup/startup.service.ts)）从远程获取到菜单数据后，调用 `add()` 方法。 @@ -37,7 +37,7 @@ ng-alain 提供若干常见的服务与Pipe管道，以便减少基础建设代 ### SettingsService -项目配置项，包含应用[App](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/interface.ts#L3)、布局[Layout](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/interface.ts#L19)、用户信息[User](//github.com/cipchk/delon/blob/master/src/core/theme/services/settings/interface.ts#L10)三种类型。 +项目配置项，包含应用[App](https://github.com/cipchk/delon/blob/master/packages/theme/services/settings/interface.ts#L3)、布局[Layout](https://github.com/cipchk/delon/blob/master/packages/theme/services/settings/interface.ts#L19)、用户信息[User](https://github.com/cipchk/delon/blob/master/packages/theme/services/settings/interface.ts#L10)三种类型。 **建议：** 在 Angular 启动服务（[startup.service.ts](//github.com/cipchk/ng-alain/blob/master/src/app/core/services/startup.service.ts)）从远程获取到应用、用户数据后，调用 `setApp()`、`setUser()` 方法。 diff --git a/docs/deploy.md b/docs/deploy.md index 31d53438cc..fab214818a 100644 --- a/docs/deploy.md +++ b/docs/deploy.md @@ -125,3 +125,7 @@ $ docker run -d -p 80:80 --name alain ng-alain ``` - 443:443 ``` + +### 容器部署 + +参考 [Angular 容器部署](https://zhuanlan.zhihu.com/p/35688938)。 diff --git a/docs/getting-started.md b/docs/getting-started.md index 0bb7befcc5..ce4b2ed968 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -18,9 +18,9 @@ ng-alain 是一个企业级中后台前端/设计解决方案脚手架，目标 有两种方式进行安装： -### 命令行工具 +### 【推荐】命令行工具 -需要依赖于 `@delon/cli`，[如何安装？](http://ng-alain.com/docs/cli) +需要依赖于 `@delon/cli`，[如何安装？](/docs/cli) ```bash ng new -c=@delon/cli my-app @@ -71,9 +71,13 @@ ng-alain 是一个标准的 Angular cli 构建的项目，因此你会非常熟 ```bash $ npm install +// 或 +$ yarn ``` -如果网络状况不佳，可以使用 [nrm](https://www.npmjs.com/package/nrm) 并切换国内NPM镜像进行加速，请务直接使用 **cnpm** 会导致关联包无法找到问题。 +> 注：请务使用 `cnpm` 安装依赖包，因为 ng-alain 脚手架需要依赖 `node_modules` 路径，而 `cnpm` 采用软链接会导致破坏文件夹名称，导致很难获取相应的样式文件。 + +如果网络状况不佳，可以使用 [nrm](https://www.npmjs.com/package/nrm) 并切换国内NPM镜像进行加速。 ```bash $ npm start diff --git a/docs/graph.md b/docs/graph.md index b619b5d9d3..24adc3a728 100644 --- a/docs/graph.md +++ b/docs/graph.md @@ -23,7 +23,7 @@ type: Advance | 地图类 | - | - | 其它 | 标签云：`tag-cloud`
图表卡片：`chart-card`
自定义图表：`chart` | - -[查看图表组件API文档](http://ng-alain.com/components/charts) +[查看图表组件API文档](/components/charts) ## 如何使用？ @@ -51,7 +51,7 @@ npm install @antv/g2 @antv/data-set @antv/g2-plugin-slider --save `@delon/abc` 提供了一个自定义G2组件的容器，可以减少不必要的组件渲染过程中所产生的奇怪问题。 -一个完整的示例见 [chart.md](//github.com/cipchk/delon/blob/master/src/core/abc/components/charts/demo/chart.md)。 +一个完整的示例见 [chart.md](https://github.com/cipchk/delon/blob/master/packages/abc/components/charts/demo/chart.md)。 ## 为什么会有 `kcart.alipay.com` 请求？ diff --git a/docs/how-to-start.md b/docs/how-to-start.md index 8ede7ba6fc..2684c05d89 100644 --- a/docs/how-to-start.md +++ b/docs/how-to-start.md @@ -45,7 +45,7 @@ this.aclService.setFull(true); ### 菜单数据 -中台的菜单数据大多数是来自后端，但给予的数据务必确保是 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/interface.ts) 格式，有关更多细节请参考：[sidebar-nav](/components/sidebar-nav) 的API说明。 +中台的菜单数据大多数是来自后端，但给予的数据务必确保是 [Menu](https://github.com/cipchk/delon/blob/master/packages/theme/services/menu/interface.ts) 格式，有关更多细节请参考：[sidebar-nav](/components/sidebar-nav) 的API说明。 ### 页面标题 diff --git a/docs/scaffold.md b/docs/scaffold.md index f2cce2a342..f1654cb52c 100644 --- a/docs/scaffold.md +++ b/docs/scaffold.md @@ -41,7 +41,7 @@ type: Basic **_mock** -Mock 数据规则目录；若你通过 [cli](http://ng-alain.com/docs/cli) 创建项目时可以指定 `-dm` 参数决定是否需要 Mock 功能。 +Mock 数据规则目录；若你通过 [cli](/docs/cli) 创建项目时可以指定 `-dm` 参数决定是否需要 Mock 功能。 **src/app/core/core.module.ts** @@ -49,7 +49,7 @@ Mock 数据规则目录；若你通过 [cli](http://ng-alain.com/docs/cli) 创 **src/app/core/i18n** -[国际化](http://ng-alain.com/docs/i18n)数据加载及处理相关类；若你通过 [cli](http://ng-alain.com/docs/cli) 创建项目时可以指定 `-di` 参数决定是否需要国际化支持。 +[国际化](/docs/i18n)数据加载及处理相关类；若你通过 [cli](/docs/cli) 创建项目时可以指定 `-di` 参数决定是否需要国际化支持。 **src/app/core/net** @@ -75,7 +75,7 @@ Mock 数据规则目录；若你通过 [cli](http://ng-alain.com/docs/cli) 创 **src/app/delon.module.ts** -针对 @delon 系列的模块导入集合，默认情况下导入所有模块，你可以利用[优化](http://ng-alain.com/docs/performance)章节，进一步按需优化。 +针对 @delon 系列的模块导入集合，默认情况下导入所有模块，你可以利用[优化](/docs/performance)章节，进一步按需优化。 **src/styles/_alain-custom-variables.less** diff --git a/docs/server.md b/docs/server.md index 5f1107af20..0801419140 100644 --- a/docs/server.md +++ b/docs/server.md @@ -23,7 +23,7 @@ ng-alain 是一套基于 Angular 技术栈的单页面应用，我们提供的 ### _HttpClient -`@delon/theme` 包含了一个叫 [_HttpClient](//github.com/cipchk/delon/blob/master/src/core/theme/services/http/http.client.ts) 类，其本质还是调用 Angular 的 `HttpClient`，只是包裹了一个 `loading`。 +`@delon/theme` 包含了一个叫 [_HttpClient](https://github.com/cipchk/delon/blob/master/packages/theme/services/http/http.client.ts) 类，其本质还是调用 Angular 的 `HttpClient`，只是包裹了一个 `loading`。 我们知道 ng-zorro-antd 充斥着大量 `nzLoading` 属性，它可以让网络请求的加载有更友好的体验，这样我们无须在每一个业务页面维护一个 `loadind` 变量。 @@ -31,11 +31,11 @@ ng-alain 是一套基于 Angular 技术栈的单页面应用，我们提供的 ### 拦截器 -默认情况下在根模块注册了两个拦截器 [SimpleInterceptor](https://github.com/cipchk/delon/blob/master/src/core/auth/token/simple/simple.interceptor.ts) 和 [DefaultInterceptor](https://github.com/cipchk/ng-alain/blob/master/src/app/core/net/default.interceptor.ts)，且执行顺序按注册顺序执行。 +默认情况下在根模块注册了两个拦截器 [SimpleInterceptor](https://github.com/cipchk/delon/blob/master/packages/auth/token/simple/simple.interceptor.ts) 和 [DefaultInterceptor](https://github.com/cipchk/ng-alain/blob/master/src/app/core/net/default.interceptor.ts)，且执行顺序按注册顺序执行。 **SimpleInterceptor** -[用户认证](/docs/auth)内置用于自动为请求添加 `token` 参数的拦截器。这里还有一个叫 [JWTInterceptor](https://github.com/cipchk/delon/blob/master/src/core/auth/token/jwt/jwt.interceptor.ts) 拦截器，是一个标准 JWT 规范，若后端采用标准JWT可以直接换成JWTInterceptor拦截器。 +[用户认证](/docs/auth)内置用于自动为请求添加 `token` 参数的拦截器。这里还有一个叫 [JWTInterceptor](https://github.com/cipchk/delon/blob/master/packages/auth/token/jwt/jwt.interceptor.ts) 拦截器，是一个标准 JWT 规范，若后端采用标准JWT可以直接换成JWTInterceptor拦截器。 **DefaultInterceptor** @@ -71,4 +71,4 @@ export const USERS = { 脚手架默认情况下使用了 `@delon/auth` 的 `SimpleInterceptor` 拦截器，导致在请求过程中若发现无法获取 Token 时会直接返回错误。 -[用户认证](http://ng-alain.com/docs/auth)这个过程是中台必备的。 +[用户认证](/docs/auth)这个过程是中台必备的。 diff --git a/docs/theme.md b/docs/theme.md index 350213d7a6..77f466f1a2 100644 --- a/docs/theme.md +++ b/docs/theme.md @@ -6,7 +6,7 @@ title: type: Advance --- -`@delon/theme` 的主题系统包含了[几十种参数](//github.com/cipchk/delon/blob/master/packages/theme/styles/variables)，你可以通过覆盖参数数值进而定制一些特别的需求。 +`@delon/theme` 的主题系统包含了[几十种参数](//github.com/cipchk/delon/tree/master/packages/theme/styles/variable)，你可以通过覆盖参数数值进而定制一些特别的需求。 ## 如何覆盖参数 diff --git a/docs/upgrade.md b/docs/upgrade.md index fe880347b4..a48bf35303 100644 --- a/docs/upgrade.md +++ b/docs/upgrade.md @@ -16,6 +16,7 @@ type: Dev - `@delon` 作为基础建设类库，在更新频率上会略高，一般一周至少更新一次 - 带有 **BREAKING CHANGES** 至少提升一个次版本号 +- [更新日志](/docs/changelog) ## 如何升级？ @@ -29,12 +30,18 @@ type: Dev 将 `^0.7.1` 替换成最新版本号。 -最后，执行： +最后，重新安装依赖包。 ```bash -npm install +$ npm install +// 或 +$ yarn ``` +> 注：请务使用 `cnpm` 安装依赖包，因为 ng-alain 脚手架需要依赖 `node_modules` 路径，而 `cnpm` 采用软链接会导致破坏文件夹名称，导致很难获取相应的样式文件。 + +如果网络状况不佳，可以使用 [nrm](https://www.npmjs.com/package/nrm) 并切换国内NPM镜像进行加速。 + ### 方式二：更新所有类库 脚手架在 `package.json` 里多数类库都是使用宽松的版本号，例如： diff --git a/docs/use-components-alone.md b/docs/use-components-alone.md index 748e83ef17..f0dac14914 100644 --- a/docs/use-components-alone.md +++ b/docs/use-components-alone.md @@ -37,4 +37,4 @@ import { AlainABCModule } from '@delon/abc'; 组件会随着脚手架的更新而不断迭代，有任何问题和需求可以反馈到 [这里](//github.com/cipchk/ng-alain/issues)。 - 最新版本：[![@delon/abc](//img.shields.io/npm/v/@delon/abc.svg?style=flat-square)](//www.npmjs.com/package/@delon/abc) -- [更新日志](http://ng-alain.com/docs/changelog) +- [更新日志](/docs/changelog) diff --git a/packages/abc/avatar-list/index.md b/packages/abc/avatar-list/index.md index a5e19367da..38a97a59dd 100644 --- a/packages/abc/avatar-list/index.md +++ b/packages/abc/avatar-list/index.md @@ -1,7 +1,6 @@ --- title: avatar-list subtitle: 用户头像列表 -order: 40 cols: 1 module: AdAvatarListModule --- diff --git a/packages/abc/charts/index.md b/packages/abc/charts/index.md index da58525011..0a5bf1a464 100644 --- a/packages/abc/charts/index.md +++ b/packages/abc/charts/index.md @@ -1,7 +1,6 @@ --- title: Charts subtitle: 图表 -order: 20 cols: 2 module: AdChartsModule --- diff --git a/packages/abc/count-down/index.md b/packages/abc/count-down/index.md index f46b6c6007..812816c31b 100644 --- a/packages/abc/count-down/index.md +++ b/packages/abc/count-down/index.md @@ -1,7 +1,6 @@ --- title: count-down subtitle: 倒计时 -order: 70 cols: 3 module: AdCountDownModule --- diff --git a/packages/abc/desc-list/index.md b/packages/abc/desc-list/index.md index 2b1a0b9b75..a0d5b49843 100644 --- a/packages/abc/desc-list/index.md +++ b/packages/abc/desc-list/index.md @@ -1,7 +1,6 @@ --- title: desc-list subtitle: 描述列表 -order: 60 cols: 1 module: AdDescListModule config: AdDescListConfig diff --git a/packages/abc/down-file/index.md b/packages/abc/down-file/index.md index b87cb403b5..57803cc537 100644 --- a/packages/abc/down-file/index.md +++ b/packages/abc/down-file/index.md @@ -1,7 +1,6 @@ --- title: down-file subtitle: 下载文件 -order: 310 cols: 1 type: Directive module: AdDownFileModule diff --git a/packages/abc/ellipsis/index.md b/packages/abc/ellipsis/index.md index 3c7c9c60eb..1a142185e1 100644 --- a/packages/abc/ellipsis/index.md +++ b/packages/abc/ellipsis/index.md @@ -1,7 +1,6 @@ --- title: ellipsis subtitle: 文本自动省略号 -order: 80 cols: 1 module: AdEllipsisModule --- diff --git a/packages/abc/error-collect/index.md b/packages/abc/error-collect/index.md index 823d2eb76b..be28e45e9a 100644 --- a/packages/abc/error-collect/index.md +++ b/packages/abc/error-collect/index.md @@ -1,7 +1,6 @@ --- title: error-collect subtitle: 表单异常消息采集器 -order: 90 cols: 1 module: AdErrorCollectModule config: AdErrorCollectConfig diff --git a/packages/abc/exception/index.md b/packages/abc/exception/index.md index 7c38d2f565..b905bdf591 100644 --- a/packages/abc/exception/index.md +++ b/packages/abc/exception/index.md @@ -1,7 +1,6 @@ --- title: exception subtitle: 异常 -order: 100 cols: 1 module: AdExceptionModule --- diff --git a/packages/abc/footer-toolbar/index.md b/packages/abc/footer-toolbar/index.md index f9204d5a29..4eeb17a53e 100644 --- a/packages/abc/footer-toolbar/index.md +++ b/packages/abc/footer-toolbar/index.md @@ -1,7 +1,6 @@ --- title: footer-toolbar subtitle: 底部工具栏 -order: 110 cols: 1 module: AdFooterToolbarModule --- diff --git a/packages/abc/full-content/index.md b/packages/abc/full-content/index.md index dececf6ce3..51f5c5b9a3 100644 --- a/packages/abc/full-content/index.md +++ b/packages/abc/full-content/index.md @@ -1,7 +1,6 @@ --- title: full-content subtitle: 全屏工作区 -order: 50 cols: 1 module: AdFullContentModule --- diff --git a/packages/abc/global-footer/index.md b/packages/abc/global-footer/index.md index 4b73b18432..ac2dd3980a 100644 --- a/packages/abc/global-footer/index.md +++ b/packages/abc/global-footer/index.md @@ -1,7 +1,6 @@ --- title: global-footer subtitle: 全局页脚 -order: 120 cols: 1 module: AdGlobalFooterModule --- diff --git a/packages/abc/image/index.md b/packages/abc/image/index.md index 6c14dc1b81..0833347be2 100644 --- a/packages/abc/image/index.md +++ b/packages/abc/image/index.md @@ -1,7 +1,6 @@ --- title: _src subtitle: 显示图像 -order: 300 cols: 1 type: Directive module: AdImageModule diff --git a/packages/abc/lodop/index.md b/packages/abc/lodop/index.md index b8dfb4d50c..f5e2ea4cab 100644 --- a/packages/abc/lodop/index.md +++ b/packages/abc/lodop/index.md @@ -1,7 +1,6 @@ --- title: lodop subtitle: Lodop打印 -order: 130 cols: 1 module: AdLodopModule config: AdLodopConfig diff --git a/packages/abc/notice-icon/index.md b/packages/abc/notice-icon/index.md index 40da06e639..dce857a1df 100644 --- a/packages/abc/notice-icon/index.md +++ b/packages/abc/notice-icon/index.md @@ -1,7 +1,6 @@ --- title: notice-icon subtitle: 通知菜单 -order: 130 cols: 1 module: AdNoticeIconModule --- diff --git a/packages/abc/number-info/index.md b/packages/abc/number-info/index.md index 9c562dbfa8..a0af937beb 100644 --- a/packages/abc/number-info/index.md +++ b/packages/abc/number-info/index.md @@ -1,7 +1,6 @@ --- title: number-info subtitle: 数据文本 -order: 140 cols: 1 module: AdNumberInfoModule --- diff --git a/packages/abc/number-to-chinese/index.md b/packages/abc/number-to-chinese/index.md index ae39d74814..d3ec5bd0f9 100644 --- a/packages/abc/number-to-chinese/index.md +++ b/packages/abc/number-to-chinese/index.md @@ -1,7 +1,6 @@ --- title: number-to-chinese subtitle: 人民币大写 -order: 140 cols: 1 module: AdNumberToChineseModule --- diff --git a/packages/abc/page-header/index.md b/packages/abc/page-header/index.md index 3505544e11..6414b96dff 100644 --- a/packages/abc/page-header/index.md +++ b/packages/abc/page-header/index.md @@ -1,7 +1,6 @@ --- title: page-header subtitle: 页头 -order: 150 cols: 1 module: AdProHeaderModule config: AdPageHeaderConfig diff --git a/packages/abc/quick-menu/index.md b/packages/abc/quick-menu/index.md index 9c16fe243f..becbad1070 100644 --- a/packages/abc/quick-menu/index.md +++ b/packages/abc/quick-menu/index.md @@ -1,7 +1,6 @@ --- title: quick-menu subtitle: 快速菜单 -order: 150 cols: 1 module: AdQuickMenuModule --- diff --git a/packages/abc/result/index.md b/packages/abc/result/index.md index 259e8ca90c..6572a3ba4d 100644 --- a/packages/abc/result/index.md +++ b/packages/abc/result/index.md @@ -1,7 +1,6 @@ --- title: result subtitle: 处理结果 -order: 160 cols: 1 module: AdResultModule --- diff --git a/packages/abc/reuse-tab/index.md b/packages/abc/reuse-tab/index.md index 2347475452..ef9db4ebf1 100644 --- a/packages/abc/reuse-tab/index.md +++ b/packages/abc/reuse-tab/index.md @@ -1,7 +1,6 @@ --- title: reuse-tab subtitle: 路由复用标签 -order: 30 cols: 1 module: AdReuseTabModule --- @@ -95,14 +94,14 @@ export class DemoReuseTabEditComponent implements OnInit { ## 常见问题 -### 1、如何Debug？ +### 如何Debug？ 路由复用会保留组件状态，这可能会带来另一个弊端；复用过程中组件的生命周期勾子不会重复触发，大部分情况下都能正常运行，但可能需要注意： - `OnDestroy` 可能会处理一些组件外部（例如：`body`）的样式等，可以参考生命周期解决。 - 开启 `debug` 模式后会在 `console` 很多信息这有助于分析路由复用的过程。 -### 2、移除 reuse-tab 组件后为什么还有路由复用效果？ +### 移除 reuse-tab 组件后为什么还有路由复用效果？ 默认脚手架导入了所有 @delon/abc 模块（在 `delon.module` 存在 `DelonABCModule.forRoot()` 时）这会导致 `AdReuseTabModule` 默认也会对相应服务进行注册，这导致即使没有使用 `` 也会路由复用的原因。你可以移除 `DelonABCModule.forRoot()` 并只导入你需要的模块即可。 diff --git a/packages/abc/sidebar-nav/index.md b/packages/abc/sidebar-nav/index.md index 5e479b8d59..f08732bca7 100644 --- a/packages/abc/sidebar-nav/index.md +++ b/packages/abc/sidebar-nav/index.md @@ -1,7 +1,6 @@ --- title: sidebar-nav subtitle: 主菜单 -order: 170 cols: 1 module: AdSidebarNavModule --- diff --git a/packages/abc/simple-table/index.md b/packages/abc/simple-table/index.md index 2468a84127..61156fcb7d 100644 --- a/packages/abc/simple-table/index.md +++ b/packages/abc/simple-table/index.md @@ -1,7 +1,6 @@ --- title: simple-table subtitle: 简易表格 -order: 10 cols: 1 module: AdSimpleTableModule config: AdSimpleTableConfig diff --git a/packages/abc/standard-form-row/index.md b/packages/abc/standard-form-row/index.md index f937aff432..22a0a31d31 100644 --- a/packages/abc/standard-form-row/index.md +++ b/packages/abc/standard-form-row/index.md @@ -1,7 +1,6 @@ --- title: standard-form-row subtitle: 标准表单行 -order: 180 cols: 1 module: AdStandardFormRowModule --- diff --git a/packages/abc/tag-select/index.md b/packages/abc/tag-select/index.md index 7b8362453d..4fec545b39 100644 --- a/packages/abc/tag-select/index.md +++ b/packages/abc/tag-select/index.md @@ -1,7 +1,6 @@ --- title: tag-select subtitle: 标签选择器 -order: 190 cols: 1 module: AdTagSelectModule --- diff --git a/packages/abc/trend/index.md b/packages/abc/trend/index.md index c725a596e8..83a6393548 100644 --- a/packages/abc/trend/index.md +++ b/packages/abc/trend/index.md @@ -1,7 +1,6 @@ --- title: trend subtitle: 趋势标记 -order: 200 cols: 1 module: AdTrendModule --- diff --git a/packages/abc/utils/index.md b/packages/abc/utils/index.md index adda1f83d0..b5cafefb3f 100644 --- a/packages/abc/utils/index.md +++ b/packages/abc/utils/index.md @@ -1,7 +1,6 @@ --- title: Utils subtitle: 工具类 -order: 999 cols: 1 module: AdUtilsModule --- diff --git a/packages/abc/xlsx/index.md b/packages/abc/xlsx/index.md index d88c69d46a..1894ca5a8c 100644 --- a/packages/abc/xlsx/index.md +++ b/packages/abc/xlsx/index.md @@ -1,7 +1,6 @@ --- title: xlsx subtitle: Excel 操作 -order: 210 cols: 1 module: AdXlsxModule --- diff --git a/packages/abc/zip/index.md b/packages/abc/zip/index.md index e29e14cf1b..2be06076a0 100644 --- a/packages/abc/zip/index.md +++ b/packages/abc/zip/index.md @@ -1,7 +1,6 @@ --- title: zip subtitle: Zip 操作 -order: 220 cols: 1 module: AdZipModule --- diff --git a/packages/form/docs/customize.md b/packages/form/docs/customize.md index 9b2e81e159..4b690ef588 100644 --- a/packages/form/docs/customize.md +++ b/packages/form/docs/customize.md @@ -16,7 +16,7 @@ type: Documents 当 `custom` 小部件无法满足你的扩展时，可以使用更宽松的扩展方式。 -### 1、编写小部件 +### 编写小部件 **常见小部件库** @@ -84,7 +84,7 @@ export class TinymceWidget extends ControlWidget implements OnInit { 小部件在渲染过程是手动变更检测，大部分情况下 `ControlWidget` 已经很好的管理什么时机应该执行变更检测，在自定义小部件过程中可能会遇到异步操作导致界面并未渲染，此时可以调用 `detectChanges` 来触发一次小部件节点的变更检测。 -### 2、注册小部件 +### 注册小部件 在根模块中定义（`declarations`、`entryComponents`）注册小部件组件，同时在模块中导入 `WidgetRegistry` 并注册自定义小部件。 @@ -105,7 +105,7 @@ export class AppModule { 当然为了更友好的维护，建议在Shared目录下定义一个专属 Json schema 模块，有兴趣可参考 [ng-alain实现](https://github.com/cipchk/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts)。 -### 2、使用自定义小部件 +### 使用自定义小部件 同其他小部件一样，只需要指定 `widget` 值，例如： diff --git a/packages/form/src/schema/index.ts b/packages/form/src/schema/index.ts index e4685fbf80..2992042a12 100644 --- a/packages/form/src/schema/index.ts +++ b/packages/form/src/schema/index.ts @@ -38,7 +38,7 @@ export type SFSchemaEnumType = SFSchemaEnum | number | string | boolean; /** * JSON Schema Form 结构体 * - * **注意：** 所有结构都以标准为基准，除了 `ui`、`debug` 两个属性为非标准单纯只是为了更好的开发 + * **注意：** 所有结构都以标准为基准，除了 `ui` 属性为非标准单纯只是为了更好的开发 */ export interface SFSchema { //////////// Any ///////////// diff --git a/packages/form/src/widgets/array/demo/simple.md b/packages/form/src/widgets/array/demo/simple.md new file mode 100644 index 0000000000..322babc455 --- /dev/null +++ b/packages/form/src/widgets/array/demo/simple.md @@ -0,0 +1,54 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + product: { + type: 'array', + title: '产品清单', + maxItems: 4, + items: { + type: 'object', + properties: { + name: { + type: 'string', + title: '名称' + }, + price: { + type: 'number', + title: '单价', + minimum: 1 + } + }, + required: [ 'name', 'price' ] + }, + ui: { grid: { arraySpan: 12 } } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/array/index.md b/packages/form/src/widgets/array/index.md index 4bb60c5833..e706ac4ea6 100644 --- a/packages/form/src/widgets/array/index.md +++ b/packages/form/src/widgets/array/index.md @@ -41,7 +41,9 @@ const ui = { }; ``` -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ------------|--------------------------|------------|-------- @@ -50,7 +52,7 @@ minItems | 约束数组最小的元素个数 | `number` | - maxItems | 约束数组最大的元素个数 | `number` | - uniqueItems | 约束数组每个元素都不相同 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 -------------|----------------------------|-----------|---------- @@ -59,32 +61,3 @@ addType | 添加按钮类型，等同 `nzType` | `string` | `dashed` removable | 是否包含移除按钮 | `boolean` | `true` removeTitle | 移除按钮文本 | `string` | `移除` $items | 数组元素类型UI描述 | `SFUISchema` | `移除` - -## Demo - -```ts -schema = { - properties: { - product: { - type: 'array', - title: '产品清单', - maxItems: 5, - items: { - type: 'object', - properties: { - name: { - type: 'string', - title: '名称' - }, - price: { - type: 'number', - title: '单价', - minimum: 1 - } - }, - required: [ 'name', 'price' ] - } - } - } -} -``` diff --git a/packages/form/src/widgets/autocomplete/demo/simple.md b/packages/form/src/widgets/autocomplete/demo/simple.md new file mode 100644 index 0000000000..4fe7edb9db --- /dev/null +++ b/packages/form/src/widgets/autocomplete/demo/simple.md @@ -0,0 +1,56 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; +import { of } from 'rxjs/observable/of'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + format: { + type: 'string', + title: 'Format', + format: 'email' + }, + widget: { + type: 'string', + title: '指定widget', + ui: { + widget: 'autocomplete', + type: 'email' + } + }, + async: { + type: 'string', + title: '异步', + ui: { + widget: 'autocomplete', + debounceTime: 100, + asyncData: (input: string) => of(input ? [ input, input + input, input + input + input ] : []) + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/autocomplete/index.md b/packages/form/src/widgets/autocomplete/index.md index 300f664a49..c452ef2ed4 100644 --- a/packages/form/src/widgets/autocomplete/index.md +++ b/packages/form/src/widgets/autocomplete/index.md @@ -16,14 +16,16 @@ type: Widgets 指每一次筛选都会触发一个HTTP请求，数据来源于 `asyncData`。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 静态数据源 | `SFSchemaEnumType[]` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -33,37 +35,3 @@ placeholder | 在文字框中显示提示讯息 | `string` | - filterOption | 是否根据输入项进行筛选，默认只对 `label` 属性执行不区分大小定 `indexOf` 过滤。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `boolean or (inputValue: string, option: SFSchemaEnum) => boolean` | `true` type | 模式，自动完成常见邮箱后缀，可以重新使用 `enum` 来指定新后缀 | `email` | - debounceTime | 去抖时间，当实时数据源时默认最少 `50`，单位：毫秒 | `number` | `0` - -## Demo - -```ts -schema = { - properties: { - // 邮箱模式1 - email: { - type: 'string', - title: 'Email', - format: 'email' - }, - // 邮箱模式2 - email: { - type: 'string', - title: 'Email', - ui: { - widget: 'autocomplete', - type: 'email' - } - }, - // 异常数据 - email: { - type: 'string', - title: 'Email', - ui: { - widget: 'autocomplete', - debounceTime: 100, - asyncData: (input: string) => of(input ? [ input, input + input, input + input + input ] : []) - } - }, - } -} -``` diff --git a/packages/form/src/widgets/boolean/demo/simple.md b/packages/form/src/widgets/boolean/demo/simple.md new file mode 100644 index 0000000000..c1e14a080a --- /dev/null +++ b/packages/form/src/widgets/boolean/demo/simple.md @@ -0,0 +1,46 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + status: { + type: 'boolean', + title: '是否启用' + }, + // 指定内容文本 + enabled: { + type: 'boolean', + title: '是否启用', + ui: { + checkedChildren: '开', + unCheckedChildren: '关' + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/boolean/index.md b/packages/form/src/widgets/boolean/index.md index c2dcb99870..114c80925e 100644 --- a/packages/form/src/widgets/boolean/index.md +++ b/packages/form/src/widgets/boolean/index.md @@ -6,38 +6,18 @@ type: Widgets 开关选择器 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ size | 大小，等同 `nzSize` | `string` | - checkedChildren | 选中时的内容 | `string` | - unCheckedChildren | 非选中时的内容 | `string` | - - -## Demo - -```ts -schema = { - properties: { - enabled: { - type: 'boolean', - title: '是否启用' - }, - // 指定内容文本 - enabled: { - type: 'boolean', - title: '是否启用', - ui: { - checkedChildren: '开', - unCheckedChildren: '关' - } - } - } -} -``` diff --git a/packages/form/src/widgets/cascader/demo/simple.md b/packages/form/src/widgets/cascader/demo/simple.md new file mode 100644 index 0000000000..f5fc616e2e --- /dev/null +++ b/packages/form/src/widgets/cascader/demo/simple.md @@ -0,0 +1,99 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService, CascaderOption } from 'ng-zorro-antd'; +import { SFSchema, CascaderWidget } from '@delon/form'; +import { of } from 'rxjs/observable/of'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + static: { + type: 'number', + title: 'Static', + enum: [ + { + value: 110000, label: '北京', parent: 0, children: [ + { value: 110100, label: '北京市', parent: 110000, children: [ + { value: 110101, label: '东城区', parent: 110100, isLeaf: true }, + { value: 110105, label: '朝阳区', parent: 110100, isLeaf: true } + ]} + ] + } + ], + ui: 'cascader', + default: [110000, 110100, 110105] + }, + // 异步获取所有数据 + async: { + type: 'number', + title: 'Async', + ui: { + widget: 'cascader', + asyncData: () => of([ + { + value: 110000, label: '北京', parent: 0, children: [ + { value: 110100, label: '北京市', parent: 110000, children: [ + { value: 110101, label: '东城区', parent: 110100, isLeaf: true }, + { value: 110105, label: '朝阳区', parent: 110100, isLeaf: true } + ]} + ] + } + ]) + }, + default: [110000, 110100, 110105] + }, + real_time: { + type: 'number', + title: 'RealTime', + ui: { + widget: 'cascader', + loadData: (node: CascaderOption, index: number, me: CascaderWidget) => { + return new Promise((resolve) => { + setTimeout(() => { + (node as any).children = [ + { value: 110000, label: '北京', parent: 0 }, + { value: 110100, label: '北京市', parent: 110000 }, + { value: 110101, label: '东城区', parent: 110100 }, + { value: 110105, label: '朝阳区', parent: 110100 }, + { value: 310000, label: '上海', parent: 0 }, + { value: 310100, label: '上海市', parent: 310000 }, + { value: 310101, label: '黄浦区', parent: 310100 }, + { value: 310104, label: '徐汇区', parent: 310100 } + ] + .filter((w: any) => { + w.isLeaf = index === 1; + return w.parent === (node.value || 0); + }); + resolve(); + me.detectChanges(); + }, 100); + }); + } + }, + default: [110000, 110100, 110105] + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/cascader/index.md b/packages/form/src/widgets/cascader/index.md index 97c662166a..bfa88291f2 100644 --- a/packages/form/src/widgets/cascader/index.md +++ b/packages/form/src/widgets/cascader/index.md @@ -20,14 +20,16 @@ type: Widgets 指每一次选择会触发HTTP请求，数据来源于 `loadData`；包含三个参数 `(node: CascaderOption, index: number, me: CascaderWidget) => PromiseLike`，其中 `me` 表示当前小部件实例，由于所有小部件的变更检测都是手控，因此数据请求返回后，**务必调用** `me.detectChanges()` 触发小部件变更检测。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 静态数据源 | `SFSchemaEnumType[]` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -55,78 +57,3 @@ selectionChange | 选项变更事件 | `(values: CascaderOption[]) => void` | - select | 选项被选中事件 | `(values: { option: CascaderOption, index: number }) => void` | - loadData | 实时数据源 | `(node: CascaderOption, index: number, me: CascaderWidget) => PromiseLike` | - clear | 内容被清空事件 | `() => void` | - - -## Demo - -```ts -schema = { - properties: { - geo: { - type: 'number', - title: '所在地', - enum: [ - { - value: 110000, label: '北京', parent: 0, children: [ - { value: 110100, label: '北京市', parent: 110000, children: [ - { value: 110101, label: '东城区', parent: 110100, isLeaf: true }, - { value: 110105, label: '朝阳区', parent: 110100, isLeaf: true } - ]} - ] - } - ], - ui: 'cascader', - default: [110000, 110100, 110105] - }, - // 异步获取所有数据 - geo: { - type: 'number', - title: '所在地', - ui: { - widget: 'cascader', - asyncData: () => of([ - { - value: 110000, label: '北京', parent: 0, children: [ - { value: 110100, label: '北京市', parent: 110000, children: [ - { value: 110101, label: '东城区', parent: 110100, isLeaf: true }, - { value: 110105, label: '朝阳区', parent: 110100, isLeaf: true } - ]} - ] - } - ]) - }, - default: [110000, 110100, 110105] - }, - // 实时 - geo: { - type: 'number', - title: '所在地', - ui: { - widget: 'cascader', - loadData: (node: CascaderOption, index: number, me: CascaderWidget) => { - return new Promise((resolve) => { - setTimeout(() => { - node.children = [ - { value: 110000, label: '北京', parent: 0 }, - { value: 110100, label: '北京市', parent: 110000 }, - { value: 110101, label: '东城区', parent: 110100 }, - { value: 110105, label: '朝阳区', parent: 110100 }, - { value: 310000, label: '上海', parent: 0 }, - { value: 310100, label: '上海市', parent: 310000 }, - { value: 310101, label: '黄浦区', parent: 310100 }, - { value: 310104, label: '徐汇区', parent: 310100 } - ] - .filter((w: any) => { - w.isLeaf = index === 1; - return w.parent === (node.value || 0); - }); - resolve(); - me.detectChanges(); - }, 100); - }); - } - }, - default: [110000, 110100, 110105] - } - } -} -``` diff --git a/packages/form/src/widgets/checkbox/demo/simple.md b/packages/form/src/widgets/checkbox/demo/simple.md new file mode 100644 index 0000000000..fc10e145df --- /dev/null +++ b/packages/form/src/widgets/checkbox/demo/simple.md @@ -0,0 +1,70 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { of } from 'rxjs/observable/of'; +import { delay } from 'rxjs/operators'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + // 单个多选框 + single: { + 'type': 'boolean', + 'title': '同意本协议', + 'description': '《用户协议》', + 'ui': { + 'widget': 'checkbox' + }, + 'default': true + }, + // 多选框组 + 'mulit': { + 'type': 'string', + 'title': 'Mulit', + 'enum': [ 'Apple', 'Pear', 'Orange' ], + 'ui': { + 'widget': 'checkbox', + 'grid': { 'span': 8 } // 指定每一项 8 个单元的布局 + }, + 'default': ['Apple'] + }, + // 异步数据 + 'async': { + 'type': 'string', + 'title': 'Async', + 'ui': { + 'widget': 'checkbox', + 'asyncData': () => of([ + { label: 'Apple', value: 'Apple' }, + { label: 'Pear', value: 'Pear' }, + { label: 'Orange', value: 'Orange' } + ]).pipe(delay(200)) + }, + 'default': ['Apple'] + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/checkbox/index.md b/packages/form/src/widgets/checkbox/index.md index 7d224605d4..f270bcfef8 100644 --- a/packages/form/src/widgets/checkbox/index.md +++ b/packages/form/src/widgets/checkbox/index.md @@ -6,7 +6,9 @@ type: Widgets 一组可选项中进行多项选择时 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -15,7 +17,7 @@ readOnly | 禁用状态 | `boolean` | - title | 无 `enum` 时表示多选框文本内容 | `string` | - description | 无 `enum` 时表示多选框后帮助信息 | `string` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -24,47 +26,3 @@ size | 大小，等同 `nzSize` | `string` | - styleType | radio的样式 | `default, button` | `default` checkAll | 是否需要全选 | `boolean` | - checkAllText | 全选按钮文本 | `string` | `全选` - -## Demo - -```ts -schema = { - properties: { - // 单个多选框 - protocol: { - "type": "boolean", - "title": "同意本协议", - "description": "《用户协议》", - "ui": { - "widget": "checkbox" - }, - "default": true - }, - // 多选框组 - "food": { - "type": "string", - "title": "Food", - "enum": [ "Apple", "Pear", "Orange" ], - "ui": { - "widget": "checkbox", - "grid": { "span": 8 } // 指定每一项 8 个单元的布局 - }, - "default": ["Apple"] - }, - // 异步数据 - "food": { - "type": "string", - "title": "Food", - "ui": { - "widget": "checkbox", - "asyncData": () => of([ - { label: 'Apple', value: 'Apple' }, - { label: 'Pear', value: 'Pear' }, - { label: 'Orange', value: 'Orange' } - ]).pipe(delay(200)) - }, - "default": ["Apple"] - }, - } -} -``` diff --git a/packages/form/src/widgets/custom/demo/simple.md b/packages/form/src/widgets/custom/demo/simple.md new file mode 100644 index 0000000000..4f0f0b1f1a --- /dev/null +++ b/packages/form/src/widgets/custom/demo/simple.md @@ -0,0 +1,53 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: ` + + + 自定义内容: + + + + ` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + custom: { + type: 'string', + title: '自定义内容', + ui: { + widget: 'custom' + }, + default: 'test' + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/custom/index.md b/packages/form/src/widgets/custom/index.md index d8fdfaa670..f95d6b8816 100644 --- a/packages/form/src/widgets/custom/index.md +++ b/packages/form/src/widgets/custom/index.md @@ -9,45 +9,16 @@ type: Widgets ## 如何使用？ 自定义小部件无须在 Schema 中任何特殊定义，但务必确保 **sf-template** 是一个有效路径值；它等同 Schema 属性名。 -## Demo - -```ts -schema = { - properties: { - custom: { - type: 'string', - title: '自定义内容', - ui: { - widget: 'custom' - }, - default: 'test' - } - } -} -``` - -相对应模板： - -```html - - - - - -``` - -模板会传递（`{$implicit: this, schema: schema, ui: ui }`）三个参数： - -参数 | 说明 | 类型 -----|------|----- -$implicit | 当前上下文 | `ControlWidget` -schema | 当前节点Schema | `SFSchema` -ui | 当前节点UI | `SFUISchemaItem` + +## API + +模板会传递（`{$implicit: this, schema: schema, ui: ui }`）三个参数，细节请参考DEMO： + +参数 | 说明 | 类型 +----------|----------------|------------------ +$implicit | 当前上下文 | `ControlWidget` +schema | 当前节点Schema | `SFSchema` +ui | 当前节点UI | `SFUISchemaItem` 上下文包括 `formProperty` 属性，它是传递数据的唯一中间层，因此维护 `formProperty.value` 是唯一与自定义组件通信的媒介。 diff --git a/packages/form/src/widgets/date/demo/simple.md b/packages/form/src/widgets/date/demo/simple.md new file mode 100644 index 0000000000..5bf5617cc7 --- /dev/null +++ b/packages/form/src/widgets/date/demo/simple.md @@ -0,0 +1,49 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +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)); } +} +``` diff --git a/packages/form/src/widgets/date/index.md b/packages/form/src/widgets/date/index.md index 9124845ad8..b1b61713ba 100644 --- a/packages/form/src/widgets/date/index.md +++ b/packages/form/src/widgets/date/index.md @@ -4,7 +4,7 @@ subtitle: 日期 type: Widgets --- -输入或选择日期的控件。 +输入或选择日期的控件；`ng-zorro-antd` 未提供日期时间类组件，暂时以原生替代。 ## 注意事项 @@ -21,14 +21,16 @@ type: Widgets - `string` 默认 `YYYY-MM-DD HH:mm:ss` - `number` 默认 `x` 13位Unix Timestamp -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ readOnly | 禁用状态 | `boolean` | - format | 数据格式类型 | `string` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -36,28 +38,3 @@ size | 大小，等同 `nzSize` | `string` | - placeholder | 在文字框中显示提示讯息 | `string` | - format | 数据格式化 | `string` | - displayFormat | 显示格式化，默认：`YYYY-MM-DD HH:mm:ss` | `string` | - - -## Demo - -```ts -schema = { - 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' } - }, - } -} -``` diff --git a/packages/form/src/widgets/mention/demo/simple.md b/packages/form/src/widgets/mention/demo/simple.md new file mode 100644 index 0000000000..6900f96dff --- /dev/null +++ b/packages/form/src/widgets/mention/demo/simple.md @@ -0,0 +1,66 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { delay } from 'rxjs/operators'; +import { of } from 'rxjs/observable/of'; +import { MentionOnSearchTypes, NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + remark: { + type: 'string', + title: '描述', + enum: ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'], + minimum: 2, + maximum: 5, + ui: { + widget: 'mention', + inputStyle: 'textarea' + } + }, + // 异步静态数据源 + async: { + type: 'string', + title: 'Async', + ui: { + widget: 'mention', + asyncData: () => of(['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']).pipe(delay(1000)) + } + }, + // 实时数据 + real_time: { + type: 'string', + title: 'RealTime', + ui: { + widget: 'mention', + loadData: (option: MentionOnSearchTypes) => of( + ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'].filter(item => item.indexOf(option.value) !== -1) + ).pipe(delay(300)) + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/mention/index.md b/packages/form/src/widgets/mention/index.md index 7334bb1467..0958ba6446 100644 --- a/packages/form/src/widgets/mention/index.md +++ b/packages/form/src/widgets/mention/index.md @@ -20,7 +20,9 @@ type: Widgets 指每一次选择会触发HTTP请求，数据来源于 `loadData`。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -29,7 +31,7 @@ readOnly | 禁用状态 | `boolean` | - minimum | 最少提及次数 | `number` | - maximum | 最多提及次数 | `number` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -44,43 +46,3 @@ valueWith | 建议选项的取值方法 | `(any) => string` | `(value: string) select | 下拉框选择建议时回调 | `(value: any) => void` | - inputStyle | 文本框类型 | `text, textarea` | `text` autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | `Boolean|Object` | `true` - -## Demo - -```ts -schema = { - properties: { - remark: { - type: 'string', - title: '描述', - enum: ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'], - minimum: 1, - maximum: 2, - ui: { - widget: 'mention', - inputStyle: 'textarea - } - }, - // 异步静态数据源 - remark: { - type: 'string', - title: '描述', - ui: { - widget: 'mention', - asyncData: () => of(['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']).pipe(delay(1000)) - } - }, - // 实时数据 - remark: { - type: 'string', - title: '描述', - ui: { - widget: 'mention', - loadData: (option: MentionOnSearchTypes) => of( - ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'].filter(item => item.indexOf(option.value) !== -1) - ).pipe(delay(300)) - } - } - } -} -``` diff --git a/packages/form/src/widgets/number/demo/simple.md b/packages/form/src/widgets/number/demo/simple.md new file mode 100644 index 0000000000..5ea6eb7014 --- /dev/null +++ b/packages/form/src/widgets/number/demo/simple.md @@ -0,0 +1,35 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + number: { type: 'number', minimum: 18, maximum: 100, multipleOf: 2 }, + integer: { type: 'integer', default: 10 } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/number/index.md b/packages/form/src/widgets/number/index.md index 82bf94c321..5afe880aca 100644 --- a/packages/form/src/widgets/number/index.md +++ b/packages/form/src/widgets/number/index.md @@ -10,7 +10,9 @@ type: Widgets - 若 `type="integer"` 会**强制**移除小数部分。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -20,54 +22,10 @@ maximum | 最小值 | `number` | - exclusiveMaximum | 约束是否包括 `maximum` 值 | `boolean` | - multipleOf | 倍数 | `number` | `1` -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ formatter | 等同 `nzFormatter` | - | - parser | 等同 `nzParser` | - | - precision | 等同 `nzPrecision` | - | - - -## Demo - -```ts -schema = { - "properties": { - // 单个多选框 - "protocol": { - "type": "boolean", - "title": "同意本协议", - "description": "《用户协议》", - "ui": { - "widget": "checkbox" - }, - "default": true - }, - // 多选框组 - "food": { - "type": "string", - "title": "Food", - "enum": [ "Apple", "Pear", "Orange" ], - "ui": { - "widget": "checkbox", - "grid": { "span": 8 } // 指定每一项 8 个单元的布局 - }, - "default": ["Apple"] - }, - // 异步数据 - "food": { - "type": "string", - "title": "Food", - "ui": { - "widget": "checkbox", - "asyncData": () => of([ - { label: 'Apple', value: 'Apple' }, - { label: 'Pear', value: 'Pear' }, - { label: 'Orange', value: 'Orange' } - ]).pipe(delay(200)) - }, - "default": ["Apple"] - }, - } -} -``` diff --git a/packages/form/src/widgets/object/demo/simple.md b/packages/form/src/widgets/object/demo/simple.md new file mode 100644 index 0000000000..26a785c4c6 --- /dev/null +++ b/packages/form/src/widgets/object/demo/simple.md @@ -0,0 +1,41 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + name: { type: 'string' }, + age: { type: 'number' } + }, + required: [ 'name', 'age' ], + ui: { + // 指定 `label` 和 `control` 在一行中各占栅格数 + spanLabel: 4, + spanControl: 5 + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/object/index.md b/packages/form/src/widgets/object/index.md index 40f771cdac..7cbb2c1830 100644 --- a/packages/form/src/widgets/object/index.md +++ b/packages/form/src/widgets/object/index.md @@ -6,7 +6,9 @@ type: Widgets 创建对象，只对 `schema.type="object"` 时有效。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 --------------|-----------------------------|-------------------------------|-------- @@ -15,25 +17,8 @@ required | 必填项属性 | `string[]` maxProperties | 最大属性个数，必须是非负整数 | `number` | - minProperties | 最小属性个数，必须是非负整数 | `number` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 -----|-------------------------------------------------|------------------|-------- ui | 指定UI配置信息，优先级高于 `sf` 组件 `ui` 属性值 | `SFUISchemaItem` | - - -## Demo - -```ts -schema = { - properties: { - name: { type: "string" }, - age: { type: "number" } - }, - required: [ "name", "age" ], - ui: { - // 指定 `label` 和 `control` 在一行中各占栅格数 - spanLabel: 4, - spanControl: 20 - } -} -``` diff --git a/packages/form/src/widgets/radio/demo/simple.md b/packages/form/src/widgets/radio/demo/simple.md new file mode 100644 index 0000000000..ac7dd5ea06 --- /dev/null +++ b/packages/form/src/widgets/radio/demo/simple.md @@ -0,0 +1,53 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; +import { of } from 'rxjs/observable/of'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + 'sex': { + 'type': 'string', + 'title': 'Sex', + 'enum': [ '男', '女', '未知' ], + 'ui': { + 'widget': 'radio', + 'styleType': 'button' + }, + 'default': '未知' + }, + // 异步数据 + 'async': { + 'type': 'string', + 'title': 'Async', + 'ui': { + 'widget': 'radio', + asyncData: () => of([ '男', '女', '未知' ]) + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/radio/index.md b/packages/form/src/widgets/radio/index.md index 089c5851bd..e5d21611bb 100644 --- a/packages/form/src/widgets/radio/index.md +++ b/packages/form/src/widgets/radio/index.md @@ -6,45 +6,19 @@ type: Widgets 一般用于在多个备选项中选中单个状态。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 数据源 | `SFSchemaEnumType[]` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ asyncData | 异步数据源 | `() => Observable` | - size | 大小，等同 `nzSize` | `string` | - styleType | radio的样式 | `default, button` | `default` - -## Demo - -```ts -schema = { - "properties": { - "sex": { - "type": "string", - "title": "Sex", - "enum": [ "男", "女", "未知" ], - "ui": { - "widget": "radio", - "styleType": "button" - }, - "default": "未知" - }, - // 异步数据 - "sex": { - "type": "string", - "title": "Sex", - "ui": { - "widget": "radio", - asyncData: () => of([ '男', '女', '未知' ]) - } - } - } -} -``` diff --git a/packages/form/src/widgets/rate/demo/simple.md b/packages/form/src/widgets/rate/demo/simple.md new file mode 100644 index 0000000000..1a5da1f019 --- /dev/null +++ b/packages/form/src/widgets/rate/demo/simple.md @@ -0,0 +1,53 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + rate: { + type: 'number', + title: '评级', + default: 4.5, + ui: { + widget: 'rate' + } + }, + // 允许半选 + rate2: { + type: 'number', + title: '评级', + maximum: 5, + multipleOf: 0.5, + default: 4.5, + ui: { + widget: 'rate', + text: '{{value}} starts' + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/rate/index.md b/packages/form/src/widgets/rate/index.md index 1bd62c04c1..4e9ca60914 100644 --- a/packages/form/src/widgets/rate/index.md +++ b/packages/form/src/widgets/rate/index.md @@ -6,46 +6,19 @@ type: Widgets 对评价进行展示，对事物进行快速的评级操作。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ maximum | 总星数 | `number` | `5` multipleOf | `0.5` 表示允许半选，其它值表示不允许 | `number` | `0.5` -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ allowClear | 是否允许再次点击后清除 | `boolean` | `true` autoFocus | 自动获取焦点 | `boolean` | `false` text | 方案，`{{value}}` 表示当前值（注意无任何空格） | `string` | - - -## Demo - -```ts -schema = { - properties: { - rate: { - type: 'number', - title: '评级', - default: 4.5, - ui: { - widget: 'rate' - } - }, - // 允许半选 - rate: { - type: 'number', - title: '评级', - maximum: 5, - multipleOf: 0.5, - default: 4.5, - ui: { - widget: 'rate', - text: '{{value}} starts' - } - } - } -} -``` diff --git a/packages/form/src/widgets/select/demo/simple.md b/packages/form/src/widgets/select/demo/simple.md new file mode 100644 index 0000000000..419cb42959 --- /dev/null +++ b/packages/form/src/widgets/select/demo/simple.md @@ -0,0 +1,82 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; +import { of } from 'rxjs/observable/of'; +import { delay } from 'rxjs/operators'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + status: { + type: 'string', + title: '状态', + enum: [ + { label: '待支付', value: 'WAIT_BUYER_PAY' }, + { label: '已支付', value: 'TRADE_SUCCESS' }, + { label: '交易完成', value: 'TRADE_FINISHED' } + ], + default: 'WAIT_BUYER_PAY', + ui: { + widget: 'select' + } + }, + // 标签 + tags: { + type: 'string', + title: '标签', + enum: [ + { label: '待支付', value: 'WAIT_BUYER_PAY' }, + { label: '已支付', value: 'TRADE_SUCCESS' }, + { label: '交易完成', value: 'TRADE_FINISHED' } + ], + ui: { + widget: 'select', + mode: 'tags' + }, + default: null + }, + // 异步数据 + async: { + type: 'string', + title: 'Async', + ui: { + widget: 'select', + asyncData: () => of([ + { + label: '订单状态', + group: true, + children: [ + { label: '待支付', value: 'WAIT_BUYER_PAY' }, + { label: '已支付', value: 'TRADE_SUCCESS' }, + { label: '交易完成', value: 'TRADE_FINISHED' } + ] + } + ]).pipe(delay(1200)) + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/select/index.md b/packages/form/src/widgets/select/index.md index 7678a21ffd..00db12aff0 100644 --- a/packages/form/src/widgets/select/index.md +++ b/packages/form/src/widgets/select/index.md @@ -6,14 +6,16 @@ type: Widgets 下拉选择器。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 数据源 | `SFSchemaEnumType[]` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -26,65 +28,10 @@ dropdownClassName | 下拉菜单的 className 属性 | `string` | - dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | `boolean` | `true` dropdownStyle | 下拉菜单的 style 属性 | `object` | - serverSearch | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` -filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - maxMultipleCount | 最多选中多少个标签| `number` | `Infinity` -mode | 设置 nz-select 的模式 | `multiple,tags,default` | `default` +mode | 设置 nz-select 的模式，`tags` 建议增加 `default: null`，否则可能会遇到初始化有一个空的标签。 | `multiple,tags,default` | `default` notFoundContent | 当下拉列表为空时显示的内容 | `string` | - showSearch | 使单选模式可搜索 | `boolean` | `false` searchChange | 搜索内容变化回调函数，参数为搜索内容，必须返回 `Promise` 对象 | `Function` | - openChange | 下拉菜单打开关闭回调函数 | `Function` | - scrollToBottom | 下拉菜单滚动到底部回调，可用于作为动态加载的触发条件 | `Function` | - - -## Demo - -```ts -schema = { - properties: { - status: { - type: 'string', - title: '状态', - enum: [ - { label: '待支付', value: 'WAIT_BUYER_PAY' }, - { label: '已支付', value: 'TRADE_SUCCESS' }, - { label: '交易完成', value: 'TRADE_FINISHED' } - ], - ui: { - widget: 'select' - } - }, - // 标签 - status: { - type: 'string', - title: '状态', - enum: [ - { label: '待支付', value: 'WAIT_BUYER_PAY' }, - { label: '已支付', value: 'TRADE_SUCCESS' }, - { label: '交易完成', value: 'TRADE_FINISHED' } - ], - ui: { - widget: 'select', - mode: 'tags' - } - }, - // 异步数据 - status: { - type: 'string', - title: '状态', - ui: { - widget: 'select', - asyncData: () => of([ - { - label: '订单状态', - group: true, - children: [ - { label: '待支付', value: 'WAIT_BUYER_PAY' }, - { label: '已支付', value: 'TRADE_SUCCESS' }, - { label: '交易完成', value: 'TRADE_FINISHED' } - ] - } - ]).pipe(delay(1200)) - } - }, - } -} -``` diff --git a/packages/form/src/widgets/select/select.widget.ts b/packages/form/src/widgets/select/select.widget.ts index 5ea67fbedc..eb54acd56a 100644 --- a/packages/form/src/widgets/select/select.widget.ts +++ b/packages/form/src/widgets/select/select.widget.ts @@ -19,7 +19,6 @@ import { getData } from '../../utils'; [nzDropdownClassName]="i.dropdownClassName" [nzDropdownMatchSelectWidth]="i.dropdownMatchSelectWidth" [nzServerSearch]="i.serverSearch" - [nzFilterOption]="i.filterOption" [nzMaxMultipleCount]="i.maxMultipleCount" [nzMode]="i.mode" [nzNotFoundContent]="i.notFoundContent" @@ -65,11 +64,10 @@ export class SelectWidget extends ControlWidget implements OnInit { dropdownClassName: this.ui.dropdownClassName || null, dropdownMatchSelectWidth: this.ui.dropdownMatchSelectWidth || true, serverSearch: this.ui.serverSearch || false, - filterOption: this.ui.filterOption, maxMultipleCount: this.ui.maxMultipleCount || Infinity, mode: this.ui.mode || 'default', notFoundContent: this.ui.notFoundContent || '无法找到', - showSearch: this.ui.showSearch + showSearch: this.ui.showSearch || true }; } @@ -87,8 +85,14 @@ export class SelectWidget extends ControlWidget implements OnInit { } searchChange(text: string) { - if (this.ui.onSearch) - this.ui.onSearch(text).then((res: any[]) => this.data = res); + if (this.ui.onSearch) { + this.ui.onSearch(text).then((res: any[]) => { + this.data = res; + this.detectChanges(); + }); + return ; + } + this.detectChanges(); } scrollToBottom(value: any) { diff --git a/packages/form/src/widgets/slider/demo/simple.md b/packages/form/src/widgets/slider/demo/simple.md new file mode 100644 index 0000000000..d92335efe1 --- /dev/null +++ b/packages/form/src/widgets/slider/demo/simple.md @@ -0,0 +1,51 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + count: { + type: 'number', + title: '数量', + ui: { + widget: 'slider' + }, + default: 10 + }, + // 双滑块模式 + range: { + type: 'number', + title: '范围', + ui: { + widget: 'slider', + range: true + }, + default: [ 10, 20 ] + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/slider/index.md b/packages/form/src/widgets/slider/index.md index eee5235d88..f873f6abf9 100644 --- a/packages/form/src/widgets/slider/index.md +++ b/packages/form/src/widgets/slider/index.md @@ -10,7 +10,9 @@ type: Widgets - `exclusiveMinimum`、`exclusiveMaximum` 无效 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -18,7 +20,7 @@ minimum | 最小值 | `number` | - maximum | 最小值 | `number` | - multipleOf | 倍数 | `number` | `1` -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ diff --git a/packages/form/src/widgets/string/demo/simple.md b/packages/form/src/widgets/string/demo/simple.md new file mode 100644 index 0000000000..26dbaebc71 --- /dev/null +++ b/packages/form/src/widgets/string/demo/simple.md @@ -0,0 +1,42 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { SFSchema } from '@delon/form'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + name: { + type: 'string', + title: 'Name', + ui: { + addOnAfter: 'RMB', + placeholder: 'RMB结算' + } + } + }, + required: ['name'] + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/string/index.md b/packages/form/src/widgets/string/index.md index 253b40a8b6..9b9f4524a6 100644 --- a/packages/form/src/widgets/string/index.md +++ b/packages/form/src/widgets/string/index.md @@ -6,14 +6,16 @@ type: Widgets 默认小部件，一般用于字符串元素。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ maxLength | 表单最大长度 | `number` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -29,19 +31,3 @@ prefix | 带有前缀图标的 input，等同 `nzPrefix` | `string` | - prefixIcon | 前缀图标，等同 `nzPrefixIcon` | `string` | - suffix | 带有后缀图标的 input，等同 `nzSuffix` | `string` | - suffixIcon | 后缀图标，等同 `nzSuffixIcon` | `string` | - - -## Demo - -```ts -schema = { - properties: { - name: { - type: 'string', - title: 'Name', - ui: { - addOnAfter: 'RMB' - } - } - } -} -``` diff --git a/packages/form/src/widgets/tag/demo/simple.md b/packages/form/src/widgets/tag/demo/simple.md new file mode 100644 index 0000000000..cb34ecf56a --- /dev/null +++ b/packages/form/src/widgets/tag/demo/simple.md @@ -0,0 +1,46 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + like: { + type: 'number', + title: '兴趣', + enum: [ + { value: 1, label: '电影' }, + { value: 2, label: '书' }, + { value: 3, label: '旅行' } + ], + ui: { + widget: 'tag' + }, + default: [ 1, 2 ] + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/tag/index.md b/packages/form/src/widgets/tag/index.md index 8a826c4b8f..1224a7cbf9 100644 --- a/packages/form/src/widgets/tag/index.md +++ b/packages/form/src/widgets/tag/index.md @@ -6,36 +6,16 @@ type: Widgets 进行标记标签，**注：** 只支持 `checkable` 标签模式。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 数据源 | `SFSchemaEnumType[]` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ asyncData | 异步数据源 | `() => Observable` | - - -## Demo - -```ts -schema = { - properties: { - like: { - type: 'number', - title: '兴趣', - enum: [ - { value: 1, label: '电影' }, - { value: 2, label: '书' }, - { value: 3, label: '旅行' } - ], - ui: { - widget: 'tag' - }, - default: [ 1, 2 ] - } - } -} -``` diff --git a/packages/form/src/widgets/textarea/demo/simple.md b/packages/form/src/widgets/textarea/demo/simple.md new file mode 100644 index 0000000000..2591dc5456 --- /dev/null +++ b/packages/form/src/widgets/textarea/demo/simple.md @@ -0,0 +1,41 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + remark: { + type: 'string', + title: '描述', + ui: { + widget: 'textarea', + autosize: { minRows: 2, maxRows: 6 } + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/textarea/index.md b/packages/form/src/widgets/textarea/index.md index 0f881f7ebd..8a288bb234 100644 --- a/packages/form/src/widgets/textarea/index.md +++ b/packages/form/src/widgets/textarea/index.md @@ -6,34 +6,19 @@ type: Widgets 一般用于多行字符串。 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ maxLength | 表单最大长度 | `number` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ size | 大小，等同 `nzSize` | `string` | - placeholder | 在文字框中显示提示讯息 | `string` | - autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | `Boolean|Object` | `true` - -## Demo - -```ts -schema = { - properties: { - remark: { - type: 'string', - title: '描述', - ui: { - widget: 'textarea', - autosize: { minRows: 2, maxRows: 6 } - } - } - } -} -``` diff --git a/packages/form/src/widgets/time/demo/simple.md b/packages/form/src/widgets/time/demo/simple.md new file mode 100644 index 0000000000..ceafac25b9 --- /dev/null +++ b/packages/form/src/widgets/time/demo/simple.md @@ -0,0 +1,45 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + 'time': { + 'type': 'string', + 'format': 'time' + }, + 'time_number': { + 'type': 'number', + ui: { widget: 'time' } + }, + 'time_string': { + 'type': 'string', + ui: { widget: 'time' } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/time/index.md b/packages/form/src/widgets/time/index.md index ce0ed8519c..07ff5075c3 100644 --- a/packages/form/src/widgets/time/index.md +++ b/packages/form/src/widgets/time/index.md @@ -4,7 +4,7 @@ subtitle: 时间 type: Widgets --- -输入或选择时间的控件。 +输入或选择时间的控件；`ng-zorro-antd` 未提供日期时间类组件，暂时以原生替代。 ## 注意事项 @@ -18,14 +18,16 @@ type: Widgets - `string` 默认 `HH:mm:ss` - `number` 默认 `x` 13位Unix Timestamp -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ readOnly | 禁用状态 | `boolean` | - format | 数据格式类型 | `string` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -33,24 +35,3 @@ size | 大小，等同 `nzSize` | `string` | - placeholder | 在文字框中显示提示讯息 | `string` | - format | 数据格式化 | `string` | - displayFormat | 显示格式化，默认：`YYYY-MM-DD HH:mm:ss` | `string` | - - -## Demo - -```ts -schema = { - properties: { - "time": { - "type": "string", - "format": "time" - }, - "time_number": { - "type": "number", - ui: { widget: 'time' } - }, - "time_string": { - "type": "string", - ui: { widget: 'time' } - } - } -} -``` diff --git a/packages/form/src/widgets/transfer/demo/simple.md b/packages/form/src/widgets/transfer/demo/simple.md new file mode 100644 index 0000000000..03aaec73cb --- /dev/null +++ b/packages/form/src/widgets/transfer/demo/simple.md @@ -0,0 +1,48 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + roles: { + type: 'number', + title: '角色', + enum: [ + { title: 'DNS管理', value: 10 }, + { title: 'ECS管理', value: 11 }, + { title: 'OSS管理', value: 12 }, + { title: 'RDS管理', value: 13 } + ], + ui: { + widget: 'transfer', + titles: [ '未拥有', '已拥有' ] + }, + default: [ 11, 12 ] + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/transfer/index.md b/packages/form/src/widgets/transfer/index.md index 1b44de40ab..590643e4a9 100644 --- a/packages/form/src/widgets/transfer/index.md +++ b/packages/form/src/widgets/transfer/index.md @@ -10,13 +10,15 @@ type: Widgets - `default` 值被当成 `direction: 'right'` 表示右栏中 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 数据源 | `SFSchemaEnumType[]` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -34,27 +36,3 @@ canMove | 穿梭时二次校验。 | `function` | - change | 选项在两栏之间转移时的回调函数 | `Function` | - searchChange | 搜索框内容时改变时的回调函数 | `Function` | - selectChange | 选中项发生改变时的回调函数 | `Function` | - - -## Demo - -```ts -schema = { - properties: { - roles: { - type: 'number', - title: '角色', - enum: [ - { title: 'DNS管理', value: 10 }, - { title: 'ECS管理', value: 11 }, - { title: 'OSS管理', value: 12 }, - { title: 'RDS管理', value: 13 } - ], - ui: { - widget: 'transfer', - titles: [ '未拥有', '已拥有' ] - }, - default: [ 11, 12 ] - } - } -} -``` diff --git a/packages/form/src/widgets/upload/demo/simple.md b/packages/form/src/widgets/upload/demo/simple.md new file mode 100644 index 0000000000..bec3d65a3a --- /dev/null +++ b/packages/form/src/widgets/upload/demo/simple.md @@ -0,0 +1,64 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + avatar: { + type: 'string', + title: '头像', + enum: [ + { + uid: -1, + name: 'xxx.png', + status: 'done', + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + response: { + resource_id: 1 + } + } + ], + ui: { + widget: 'upload', + action: '/upload', + resReName: 'resource_id' + } + }, + // 拖动模式 + drag: { + type: 'string', + title: 'Drag', + ui: { + widget: 'upload', + action: '/upload', + resReName: 'resource_id', + type: 'drag' + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/src/widgets/upload/index.md b/packages/form/src/widgets/upload/index.md index 8d274aa97f..7129355aca 100644 --- a/packages/form/src/widgets/upload/index.md +++ b/packages/form/src/widgets/upload/index.md @@ -13,14 +13,16 @@ type: Widgets - `enum`、`asyncData` 最后被转化成 `nzFileList` 值，且**务必**初始保证一个 `response` 属性表示远程数据并 `resReName` 能正确获取，若需要远程删除功能需要指定 `remove` 属性 - 照片墙模式：预览统一使用 `nzModal` 实现且无法自定义 -## schema 属性 +## API + +### schema 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ enum | 数据源 | `SFSchemaEnumType[]` | - readOnly | 禁用状态 | `boolean` | - -## ui 属性 +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ @@ -44,43 +46,3 @@ data | 上传所需参数或返回上传参数的方法 | `Object, (file: Upload withCredentials | 上传请求时是否携带 cookie | `boolean` | `false` remove | 点击移除文件时的回调，返回值为 `false` 时不移除 | `(file: UploadFile) => boolean｜Observable` | - change | 上传文件改变时的状态 | `(args: UploadChangeParam) => void` | - - -## Demo - -```ts -schema = { - properties: { - avatar: { - type: 'string', - title: '头像', - enum: [ - { - uid: -1, - name: 'xxx.png', - status: 'done', - url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', - response: { - resource_id: 1 - } - } - ], - ui: { - widget: 'upload', - action: '/upload', - resReName: 'resource_id' - } - }, - // 拖动模式 - avatar: { - type: 'string', - title: '头像', - ui: { - widget: 'upload', - action: '/upload', - resReName: 'resource_id', - type: 'drag' - } - } - } -} -``` diff --git a/packages/form/widgets-third/tinymce/demo/simple.md b/packages/form/widgets-third/tinymce/demo/simple.md new file mode 100644 index 0000000000..1018b96861 --- /dev/null +++ b/packages/form/widgets-third/tinymce/demo/simple.md @@ -0,0 +1,40 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + remark: { + type: 'string', + title: '描述', + ui: { + widget: 'tinymce' + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/widgets-third/tinymce/index.md b/packages/form/widgets-third/tinymce/index.md index 1d538c7317..15b16933c0 100644 --- a/packages/form/widgets-third/tinymce/index.md +++ b/packages/form/widgets-third/tinymce/index.md @@ -8,26 +8,12 @@ Tinymce富文本。 > 注：第三方小部件默认并未注册，细节见[自定义小部件](https://ng-alain.com/form/customize)。 -## ui 属性 +## API + +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ config | 配置项说明，[见官网](https://www.tinymce.com/docs/configure/integration-and-setup/) | `Object` | - loading | 初始化提示文本 | `string` | `加载中...` change | 编辑器内容发生改变时会触发该事件 | `(html: string) => void` | - - -## Demo - -```ts -schema = { - properties: { - remark: { - type: 'string', - title: '描述', - ui: { - widget: 'tinymce' - } - } - } -} -``` diff --git a/packages/form/widgets-third/ueditor/demo/simple.md b/packages/form/widgets-third/ueditor/demo/simple.md new file mode 100644 index 0000000000..2a598ab36d --- /dev/null +++ b/packages/form/widgets-third/ueditor/demo/simple.md @@ -0,0 +1,40 @@ +--- +title: + zh-CN: 基础样例 + en-US: Basic Usage +order: 0 +--- + +## zh-CN + +最简单的用法。 + +## en-US + +Simplest of usage. + +```ts +import { Component } from '@angular/core'; +import { SFSchema } from '@delon/form'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + remark: { + type: 'string', + title: '描述', + ui: { + widget: 'ueditor' + } + } + } + }; + constructor(public msg: NzMessageService) { } + submit(value: any) { this.msg.success(JSON.stringify(value)); } +} +``` diff --git a/packages/form/widgets-third/ueditor/index.md b/packages/form/widgets-third/ueditor/index.md index 2262ed5c63..7329a181f3 100644 --- a/packages/form/widgets-third/ueditor/index.md +++ b/packages/form/widgets-third/ueditor/index.md @@ -8,26 +8,12 @@ Ueditor富文本。 > 注：第三方小部件默认并未注册，细节见[自定义小部件](https://ng-alain.com/form/customize)。 -## ui 属性 +## API + +### ui 属性 参数 | 说明 | 类型 | 默认值 ----|------|-----|------ config | 前端配置项说明，[见官网](http://fex.baidu.com/ueditor/#start-config) | `Object` | - loading | 初始化提示文本 | `string` | `加载中...` change | 编辑器内容发生改变时会触发该事件 | `(html: string) => void` | - - -## Demo - -```ts -schema = { - properties: { - remark: { - type: 'string', - title: '描述', - ui: { - widget: 'ueditor' - } - } - } -} -``` diff --git a/scripts/site/utils/generate-md.ts b/scripts/site/utils/generate-md.ts index e569999f49..d21fb3715b 100644 --- a/scripts/site/utils/generate-md.ts +++ b/scripts/site/utils/generate-md.ts @@ -47,7 +47,7 @@ const converters = [ const attrs = Object.assign({ }, JsonML.getAttributes(node)); let target = attrs.href.startsWith('//') || attrs.href.startsWith('http') ? ' target="_blank"' : ''; if (~attrs.href.indexOf('ng-alain.com')) target = ''; - return `${JsonML.getChildren(node).map(toHtml).join('')}`; + return `${JsonML.getChildren(node).map(toHtml).join('')}`; } ], [ diff --git a/site/app/app.module.ts b/site/app/app.module.ts index af99fe99c7..7ae95a4cee 100644 --- a/site/app/app.module.ts +++ b/site/app/app.module.ts @@ -2,7 +2,6 @@ import { NgModule, LOCALE_ID, APP_INITIALIZER } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TranslateModule } from '@ngx-translate/core'; -import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; @@ -21,8 +20,6 @@ import { FooterComponent } from './layout/footer/footer.component'; import { DelonModule } from './delon.module'; -import { SwUpdatesModule } from './sw-updates/sw-updates.module'; - import { JsonSchemaModule } from './shared/json-schema/json-schema.module'; import { NgxTinymceModule } from 'ngx-tinymce'; import { UEditorModule } from 'ngx-ueditor'; @@ -35,8 +32,6 @@ export function StartupServiceFactory(startupService: StartupService): Function imports: [ BrowserModule, BrowserAnimationsModule, - ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }), - SwUpdatesModule, CoreModule, DelonModule.forRoot(), SharedModule, diff --git a/site/app/core/code.service.ts b/site/app/core/code.service.ts index 12fad5bb99..0ebe515ae6 100644 --- a/site/app/core/code.service.ts +++ b/site/app/core/code.service.ts @@ -1,12 +1,35 @@ +import { Injectable } from '@angular/core'; import sdk from '@stackblitz/sdk'; +import { NzModalService } from 'ng-zorro-antd'; +@Injectable() export class CodeService { + constructor(private modal: NzModalService) {} + /** bug here https://github.com/stackblitz/core/issues/311 **/ openOnStackBlitz( code: string, title: string, summary: string + ) { + if (~code.indexOf('@delon/form')) { + this.modal.confirm({ + nzTitle: `Stackblita 暂不支持 external resources 导入，需要手工加入否则会出现 Ajv 不存在问题`, + nzContent: `https://cdn.bootcss.com/ajv/6.4.0/ajv.min.js`, + nzOnOk: () => this._openOnStackBlitz(code, title, summary) + }, 'info').open(); + return ; + } + + this._openOnStackBlitz(code, title, summary); + } + + /** bug here https://github.com/stackblitz/core/issues/311 **/ + private _openOnStackBlitz( + code: string, + title: string, + summary: string ) { let selector = '', componentName = ''; const selectorRe = /selector:[ ]?(['|"|`])([^'"`]+)/g.exec(code); @@ -28,12 +51,15 @@ export class CodeService { "styles": ["styles.less"] }] }`, - 'index.html': (~code.indexOf(' -` : ``) - + `<${selector}>loading`, +` : ``, + + `<${selector}>loading` + ].join(''), 'main.ts': `import './polyfills'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; diff --git a/site/app/shared/components/docs/docs.component.html b/site/app/shared/components/docs/docs.component.html index f7d0c52175..a88e49e532 100644 --- a/site/app/shared/components/docs/docs.component.html +++ b/site/app/shared/components/docs/docs.component.html @@ -17,7 +17,7 @@

{{meta.item.subtitle}}

-
+
{{'app.component.refer.title' | translate}} 
import { {{meta.item.module}} } from '{{meta.item.module_name}}';
@@ -49,9 +49,7 @@

} -

- {{'app.component.examples' | translate}} -

+

-
+
diff --git a/site/app/shared/components/docs/docs.component.ts b/site/app/shared/components/docs/docs.component.ts index 604115f10a..0e75b701af 100644 --- a/site/app/shared/components/docs/docs.component.ts +++ b/site/app/shared/components/docs/docs.component.ts @@ -1,8 +1,8 @@ import { Component, Input, OnInit, OnDestroy } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { I18NService } from '../../../core/i18n/service'; import { MetaService } from '../../../core/meta.service'; -import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-docs', @@ -11,6 +11,8 @@ import { DomSanitizer } from '@angular/platform-browser'; export class DocsComponent implements OnInit, OnDestroy { private _item: any; + demoStr: string; + demoContent: SafeHtml; @Input() codes: any[]; @@ -24,13 +26,22 @@ export class DocsComponent implements OnInit, OnDestroy { // region: demo toc if (ret.demo && this.codes && this.codes.length) { - ret.con.toc = this.codes.map((item: any) => { + this.genDemoTitle(); + const toc = (ret.con.toc as any[]); + const apiPos = toc.findIndex(w => w.title === 'API'); + toc.splice(apiPos === -1 ? 0 : apiPos, 0, ...[ + { + h: 2, + href: `#${this.demoStr}`, + title: this.demoStr + } + ].concat(this.codes.map((item: any) => { return { h: 3, href: '#' + item.id, title: this.i18n.get(item.meta.title) }; - }); + }))); } // endregion @@ -58,12 +69,32 @@ export class DocsComponent implements OnInit, OnDestroy { } goTo(item: any) { - document.querySelector(item.href).scrollIntoView(); - location.hash = item.href; + let targetEl: any; + try { + targetEl = document.querySelector(item.href); + } catch (e) { + console.warn(`查找目标元素异常：${item.href}`, e); + } + + if (targetEl) { + targetEl.scrollIntoView(); + location.hash = item.href; + } else { + console.warn(`无法获取目标元素：${item.href}`); + } return false; } - private initHLJS() { + private genDemoTitle() { + this.demoStr = this.i18n.fanyi('app.component.examples'); + this.demoContent = this.sanitizer.bypassSecurityTrustHtml(` + ${this.demoStr} + # + `); + } + + private init() { + this.genDemoTitle(); setTimeout(() => { const elements = document.querySelectorAll('[class*="language-"], [class*="lang-"]'); for (let i = 0, element; element = elements[i++];) { @@ -75,9 +106,9 @@ export class DocsComponent implements OnInit, OnDestroy { i18NChange$: any; ngOnInit(): void { this.i18NChange$ = this.i18n.change.subscribe(() => { - this.initHLJS(); + this.init(); }); - this.initHLJS(); + this.init(); } ngOnDestroy(): void { diff --git a/site/app/shared/components/route-transfer/route-transfer.directive.ts b/site/app/shared/components/route-transfer/route-transfer.directive.ts new file mode 100644 index 0000000000..cb600537f4 --- /dev/null +++ b/site/app/shared/components/route-transfer/route-transfer.directive.ts @@ -0,0 +1,26 @@ +import { Directive, HostListener } from '@angular/core'; +import { Router } from '@angular/router'; + +@Directive({ + selector: '[routeTransfer]' +}) +export class RouteTransferDirective { + + constructor(private router: Router) {} + + @HostListener('click', [ '$event' ]) + _click(e: Event) { + const targetEl = e.target as HTMLLinkElement; + if (targetEl && + targetEl.tagName.toLowerCase() === 'a' && + targetEl.dataset && + targetEl.dataset.url && + targetEl.dataset.url.startsWith('/') && + !targetEl.dataset.url.startsWith('//')) { + this.router.navigateByUrl(targetEl.dataset.url); + e.preventDefault(); + e.stopPropagation(); + return false; + } + } +} diff --git a/site/app/shared/shared.module.ts b/site/app/shared/shared.module.ts index 699f31720f..1d9b7e4a31 100644 --- a/site/app/shared/shared.module.ts +++ b/site/app/shared/shared.module.ts @@ -22,6 +22,7 @@ import { EditButtonComponent } from './components/edit-button/edit-button.compon import { DocsComponent } from './components/docs/docs.component'; import { CodeBoxComponent } from './components/code-box/code-box.component'; import { DemoModalComponent } from './components/modal/demo.component'; +import { RouteTransferDirective } from './components/route-transfer/route-transfer.directive'; const COMPONENTS = [ MainMenuComponent, @@ -29,7 +30,8 @@ const COMPONENTS = [ EditButtonComponent, DocsComponent, CodeBoxComponent, - DemoModalComponent + DemoModalComponent, + RouteTransferDirective ]; const THIRDS = [ diff --git a/site/app/sw-updates/sw-updates.module.ts b/site/app/sw-updates/sw-updates.module.ts deleted file mode 100644 index 573f64d3e7..0000000000 --- a/site/app/sw-updates/sw-updates.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { ServiceWorkerModule } from '@angular/service-worker'; - -import { SwUpdatesService } from './sw-updates.service'; - - -@NgModule({ - imports: [ - ServiceWorkerModule - ], - providers: [ - SwUpdatesService - ] -}) -export class SwUpdatesModule {} diff --git a/site/app/sw-updates/sw-updates.service.ts b/site/app/sw-updates/sw-updates.service.ts deleted file mode 100644 index e2dba544b4..0000000000 --- a/site/app/sw-updates/sw-updates.service.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; -import { interval } from 'rxjs/observable/interval'; -import { Subscription } from 'rxjs/Subscription'; -import { NzModalService } from 'ng-zorro-antd'; - -@Injectable() -export class SwUpdatesService implements OnDestroy { - private checkInterval = 1000 * 60 * 60 * 6; // 6 hours - private check$: Subscription; - - constructor(sw: SwUpdate, modal: NzModalService) { - this.check$ = interval(this.checkInterval).subscribe(() => sw.checkForUpdate()); - sw.available.subscribe(e => { - modal.confirm({ - nzTitle: '缓存发生变更', - nzContent: '点确认立即生效', - nzOnOk: () => { - sw.activateUpdate().then(() => document.location.reload()); - } - }); - }); - sw.checkForUpdate(); - } - - ngOnDestroy(): void { - this.check$.unsubscribe(); - } -} diff --git a/site/site.config.js b/site/site.config.js index 1528107003..8246859a20 100644 --- a/site/site.config.js +++ b/site/site.config.js @@ -25,7 +25,7 @@ module.exports = { 'en-US': 'Other' } ], - defaultRoute: 'architecture', + defaultRoute: 'getting-started', metaIncludeAttributes: [ 'name', 'types', 'github' ], template: { meta: './site/templates/meta.ts',