NG-ZORRO/ng-zorro-antd 19.0.0-beta.0

on GitHub

19.0.0

2024-12-06

Bug Fixes

• autocomplete: remove inline style (CSP compliant) (#8875) (30c25f0)
• avatar: calculate size at the right time (#8754) (3a5ba37)
• card: remove nzBorderless input (#8741) (22ce17c)
• carousel: carousel not working correctly in rtl mode (#8770) (0202a19)
• cascader: correct menu display level (#8866) (5fec53e)
• drawer: should clear previously focused element (#8893) (4498af0)
• i18n: add missing translations to vi_VN (#8894) (f08ad1c)

Code Refactoring

• cancel support for HTML string rendering (#8831) (5fae01a)
• remove ngClass and ngStyle (#8895) (c3ab3ba)
• image: remove deprecated FADE_CLASS_NAME_MAP and IMAGE_PREVIEW_MASK_CLASS_NAME (#8912) (65223d9)

Features

• cascader: support multiple selection (#8903) (e5dfb49)
• divider: add nzVariant option (#8827) (2c63c87)
• float-button: add float-button component (#7884) (dab4d66)
• icon: support nz-icon tag selector (#8778) (1406241)
• image: close image preview when escape key pressed (#8809) (d587615)
• input: support one time password (OTP) (#8715) (cdbaf4d)
• menu: add nzTriggerSubMenuAction to support click trigger for submenu (#8461) (860df87)
• qrcode: add nzStatusRender to support customize state rendering (#8714) (6f36d75)
• segmented: redesign the segmented component (#8753) (4dc866c)
• space: add space compact component (#8755) (b9c511d)
• table: add nzSortDirections to global config (#6613) (#8721) (eb1fdc5)
• transfer: add nzOneWay to support one way style (#8717) (99fd4de)
• input-number: redesign the input-number (#8901) (df55d88)
• schematics: add v19 ng update migration (#8911) (1a20de2)

BREAKING CHANGES

• All

  • nzClass / nzStyle input properties no longer support the following features:
    • Set(): use arrays instead
    • Keys which multiple styles/classes separated with keys: split a key with spaces into multiple keys
  • Cancel support for HTML string rendering
  • Migrate @WithConfig to standard decorator. If you're using @WithConfig in your library, please turn experimentalDecorators off in tsconfig.json

• input-number: Redesign the input-number so that it will be much simpler and more flexible.

  Now you can use affixes or addons as follows, no need for ng-template and nz-input-number-group:

  <!-- Custom handler icons -->
  <nz-input-number>
    <nz-icon nzInputNumberUpIcon />
    <nz-icon nzInputNumberDownIcon />
  </nz-input-number>
  
  <!-- With affixes -->
  <nz-input-number>
    <span nzInputPrefix>Prefix</span>
    <span nzInputSuffix>Suffix</span>
  </nz-input-number>
  
  <!-- With addons -->
  <nz-input-number>
    <span nzInputAddonBefore>Before</span>
    <span nzInputAddonAfter>After</span>
  </nz-input-number>

  The old input-number component is marked as deprecated, and its entrypoint had changed to ng-zorro-antd/input-number-legacy.
  NzInputNumberComponent is now NzInputNumberLegacyComponent, and NzInputNumberModule is now NzInputNumberLegacyModule.

  Don't worry, ng update ng-zorro-antd will automatically do the migration.

• cascader: Cancel support for writing value with NzCascaderOption[] type.

  In the past, the cascader component kept a trick that if you wrote value with NzCascaderOption[] type, it extracted value by mapping each item to its value property, for example:

  @Component({
    template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
  })
  export class ExampleComponent {
    value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }]
  }

  then the value of cascader would be 'ng-zorro-antd'.
  It's strange that the input and output values don't match when we haven't changed the values, and it's hard to maintain. We expect that the value passed in should be the value in the list of options.

  In v19, this trick is removed and if you're already using this trick in your code, please consider the add a map function to pass the actual value.

• card: Remove redundant nzBorderless input property. Use nzBordered instead.

• image: Remove deprecated FADE_CLASS_NAME_MAP and IMAGE_PREVIEW_MASK_CLASS_NAME

• pipes: Remove deprecated NzSafeNullPipe

• segmented: Redesign the segmented component.

  • Value of ngModel is changed from index to option's value
  • Change emission type of nzValueChange from number to option's value type (string | number)
  • Remove nzLabelTemplate, use nz-segmented-item directive instead

• space: Rename exportAs of NzSpaceComponent from NzSpace to standard nzSpace

Deprecations

The following APIs are marked as deprecated in v19 and will be removed in the next major version.
Please refer to related documentation for better alternatives.

19.0.0

2024-12-06

Bug Fixes

• autocomplete: 修复 CSP 问题 (#8875) (30c25f0)
• avatar: 修复 overlay 中尺寸计算问题 (#8754) (3a5ba37)
• card: 移除 nzBorderless input 属性 (#8741) (22ce17c)
• carousel: 修复 rtl 模式下轮播切换顺序问题 (#8770) (0202a19)
• cascader: 取消选择时收起子选项列 (#8866) (5fec53e)
• drawer: 打开时清除之前 focus 的元素 (#8893) (4498af0)
• i18n: 更新 vi_VN 国际化文案 (#8894) (f08ad1c)

Code Refactoring

• 取消支持渲染 HTML 字符串 (#8831) (5fae01a)
• 移除 ngClass and ngStyle (#8895) (c3ab3ba)
• image: 移除废弃的 FADE_CLASS_NAME_MAP 和 IMAGE_PREVIEW_MASK_CLASS_NAME (#8912) (65223d9)

Features

• cascader: 支持多选 (#8903) (e5dfb49)
• divider: 新增 nzVariant 选项 (#8827) (2c63c87)
• float-button: 新增 float-button 组件 (#7884) (dab4d66)
• icon: 新增 nz-icon selector (#8778) (1406241)
• image: 支持通过 esc 按键关闭预览 (#8809) (d587615)
• input: 新增一次性密码框组件 (#8715) (cdbaf4d)
• menu: 新增 nzTriggerSubMenuAction 支持点击触发子菜单 (#8461) (860df87)
• qrcode: 新增 nzStatusRender 支持自定义状态渲染 (#8714) (6f36d75)
• segmented: 重新设计 segmented 组件 (#8753) (4dc866c)
• space: 新增 nz-space-compact 组件 (#8755) (b9c511d)
• table: 支持在全局配置中设置 nzSortDirections (#6613) (#8721) (eb1fdc5)
• transfer: 新增 nzOneWay 属性支持单向样式 (#8717) (99fd4de)
• input-number: 重新设计 input-number 组件 (#8901) (df55d88)
• schematics: 支持 v19 ng update 迁移 (#8911) (1a20de2)

BREAKING CHANGES

• All

  • nzClass / nzStyle 属性不再支持下列值：
    • Set()： 使用数组代替
    • 键分隔的多个类名或样式：使用空格分隔的多个键代替
  • 移除一些组件内部支持渲染 HTML 字符串的功能，因为这是非良好的模式。message，notification，modal 组件除外，因为这些组件可以通过 service 方式创建，渲染 html 字符串的用例会比较多。
  • 使用标准装饰器重写 @WithConfig。如果在库中使用了 @WithConfig，请在 tsconfig.json 中关闭 experimentalDecorators 选项

• input-number: 重新设计 input-number 组件，使其更加简单灵活

  现在为新的 input-number 添加前缀或后缀的写法如下，不再需要使用 nz-input-number-group 与 ng-template：

  <!-- Custom handler icons -->
  <nz-input-number>
    <nz-icon nzInputNumberUpIcon />
    <nz-icon nzInputNumberDownIcon />
  </nz-input-number>
  
  <!-- With affixes -->
  <nz-input-number>
    <span nzInputPrefix>Prefix</span>
    <span nzInputSuffix>Suffix</span>
  </nz-input-number>
  
  <!-- With addons -->
  <nz-input-number>
    <span nzInputAddonBefore>Before</span>
    <span nzInputAddonAfter>After</span>
  </nz-input-number>

  旧的 input-number 组件被标记为 deprecated，其入口已更改为 ng-zorro-antd/input-number-legacy。
  NzInputNumberComponent 更名为 NzInputNumberLegacyComponent，NzInputNumberModule 更名为 NzInputNumberLegacyModule。

  不用担心，ng update ng-zorro-antd 会自动迁移你的代码。

• cascader: ngModel 取消支持 NzCascaderOption[] 类型

  旧版本中，在表单中为 Cascader 组件赋值为 NzCascaderOption[] 类型时，Cascader 组件会根据提供的 nzValueProperty 映射成实际的值并写入，例如：

  @Component({
    template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
  })
  export class ExampleComponent {
    value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }]
  }

  此时 Cascader 组件输出的值将为 'ng-zorro-antd'。这就导致输入与输出的值不一致，可能存在潜在的数据问题。

  在 v19 中，我们将移除该特性，如果您已经在代码中运用了该特性，请考虑增加一个 map 方法将其映射到实际的值。

• card: 移除冗余的 nzBorderless 属性，使用 nzBordered 替代

• image: 移除废弃的 FADE_CLASS_NAME_MAP 和 IMAGE_PREVIEW_MASK_CLASS_NAME

• pipes: 移除废弃的 NzSafeNullPipe

• segmented: 重新设计 segmented 组件

  • ngModel 的值从索引值 index 改为选项值
  • nzValueChange 发出值的类型从 number 改为选项值的类型 （string | number）
  • 移除 nzLabelTemplate， 使用 nz-segmented-item 指令替代

• space: NzSpaceComponent 的 exportAs 属性重命名为标准 nzSpace

Deprecations

在 v19 中，以下 API 被标记为 deprecated，并将在下一个主要版本中移除。 请参考相关文档以获取更好的替代方案。