diff --git a/package.json b/package.json index 97daa1263..d878fd5d6 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,8 @@ "@nguniversal/express-engine": "^16.2.0", "express": "^4.18.2", "isutf8": "^4.0.0", - "@github/hotkey": "^2.0.1" + "@github/hotkey": "^2.0.1", + "ng-antd-color-picker": "^0.0.2" }, "devDependencies": { "@angular-devkit/build-angular": "^16.2.0", diff --git a/packages/form/widgets/color/demo/simple.md b/packages/form/widgets/color/demo/simple.md new file mode 100644 index 000000000..5cd26ed1b --- /dev/null +++ b/packages/form/widgets/color/demo/simple.md @@ -0,0 +1,106 @@ +--- +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 type { SFColorWidgetSchema } from '@delon/form/widgets/color'; +import { NzMessageService } from 'ng-zorro-antd/message'; + +@Component({ + selector: 'app-demo', + template: `` +}) +export class DemoComponent { + schema: SFSchema = { + properties: { + base: { + type: 'string', + title: 'Base', + ui: { + widget: 'color', + title: 'Pls choose a color', + change: console.log + } as SFColorWidgetSchema + }, + showText: { + type: 'string', + title: 'Show Text', + ui: { + widget: 'color', + showText: true, + trigger: 'hover', + change: console.log + } as SFColorWidgetSchema + }, + defaultValue: { + type: 'string', + title: 'Default Value', + ui: { + widget: 'color', + showText: true, + defaultValue: '#0a0', + change: console.log + } as SFColorWidgetSchema + }, + clearColor: { + type: 'string', + title: 'Clear Color', + ui: { + widget: 'color', + allowClear: true, + change: console.log + } as SFColorWidgetSchema + }, + disabled: { + type: 'string', + title: 'Disabled', + ui: { + widget: 'color', + showText: true + } as SFColorWidgetSchema, + readOnly: true + }, + rgb: { + type: 'string', + title: 'RGB', + ui: { + widget: 'color', + format: 'rgb', + showText: true, + change: console.log, + formatChange: console.log + } as SFColorWidgetSchema + }, + block: { + type: 'string', + title: 'Block Color', + ui: { + widget: 'color', + block: true + } as SFColorWidgetSchema, + default: '#f50' + } + } + }; + + constructor(private msg: NzMessageService) {} + + submit(value: {}): void { + this.msg.success(JSON.stringify(value)); + } +} +``` diff --git a/packages/form/widgets/color/index.en-US.md b/packages/form/widgets/color/index.en-US.md new file mode 100644 index 000000000..5bf803ec7 --- /dev/null +++ b/packages/form/widgets/color/index.en-US.md @@ -0,0 +1,33 @@ +--- +title: color +subtitle: Color +type: Non-built-in widgets +--- + +Used when the user needs to customize the color selection. + +## How to Use + +**Installation dependencies** + +`yarn add ng-antd-color-picker` + +**Import Module** + +Non-built-in modules, Should be import `ColorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11). + +## API + +### ui + +| Property | Description | Type | Default | +|----------|-------------|------|---------| +| `[format]` | Format of color | `rgb`｜`hex`｜`hsb` | `hex` | +| `[defaultValue]` | Default value of color | `string`｜`NzColor` | `false` | +| `[allowClear]` | Allow clearing color selected | `boolean` | `false` | +| `[trigger]` | ColorPicker trigger mode | `hover`｜`click` | `click` | +| `[showText]` | Show color text | `boolean` | `false` | +| `[title]` | Setting the title of the color picker | `TemplateRef`｜`string` | - | +| `(change)` | Callback when value is changed | `EventEmitter<{ color: NzColor; format: string }>` | - | +| `(formatChange)` | Callback when `format` is changed | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - | +| `[block]` | Color Block | `boolean` | `false` | diff --git a/packages/form/widgets/color/index.ts b/packages/form/widgets/color/index.ts new file mode 100644 index 000000000..277a3f31c --- /dev/null +++ b/packages/form/widgets/color/index.ts @@ -0,0 +1,21 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { DelonFormModule, WidgetRegistry } from '@delon/form'; +import { NzColorPickerModule } from 'ng-zorro-antd/color-picker'; + +import { ColorWidget } from './widget'; + +export * from './widget'; +export * from './schema'; + +@NgModule({ + imports: [FormsModule, CommonModule, DelonFormModule, NzColorPickerModule], + declarations: [ColorWidget] +}) +export class ColorWidgetModule { + constructor(widgetRegistry: WidgetRegistry) { + widgetRegistry.register(ColorWidget.KEY, ColorWidget); + } +} diff --git a/packages/form/widgets/color/index.zh-CN.md b/packages/form/widgets/color/index.zh-CN.md new file mode 100644 index 000000000..da9644edd --- /dev/null +++ b/packages/form/widgets/color/index.zh-CN.md @@ -0,0 +1,33 @@ +--- +title: color +subtitle: 颜色 +type: Non-built-in widgets +--- + +当用户需要自定义颜色选择的时候使用。 + +## 如何使用 + +**安装依赖** + +`yarn add ng-antd-color-picker` + +**导入模块** + +非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `ColorWidgetModule`。 + +## API + +### ui 属性 + +| 成员 | 说明 | 类型 | 默认值 | +|----|----|----|-----| +| `[format]` | 颜色格式 | `rgb`｜`hex`｜`hsb` | `hex` | +| `[defaultValue]` | 颜色默认的值 | `string`｜`NzColor` | - | +| `[allowClear]` | 允许清除选择的颜色 | `boolean` | `false` | +| `[trigger]` | 颜色选择器的触发模式 | `hover`｜`click` | `click` | +| `[showText]` | 显示颜色文本 | `boolean` | `false` | +| `[title]` | 设置颜色选择器的标题 | `TemplateRef`｜`string` | - | +| `(change)` | 颜色变化的回调 | `EventEmitter<{ color: NzColor; format: string }>` | - | +| `(formatChange)` | 颜色格式变化的回调 | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - | +| `[block]` | 是否颜色块 | `boolean` | `false` | diff --git a/packages/form/widgets/color/ng-package.json b/packages/form/widgets/color/ng-package.json new file mode 100644 index 000000000..ec57a9fa3 --- /dev/null +++ b/packages/form/widgets/color/ng-package.json @@ -0,0 +1,6 @@ +{ + "lib": { + "flatModuleFile": "widgets-color", + "entryFile": "index.ts" + } +} diff --git a/packages/form/widgets/color/schema.ts b/packages/form/widgets/color/schema.ts new file mode 100644 index 000000000..819eefe59 --- /dev/null +++ b/packages/form/widgets/color/schema.ts @@ -0,0 +1,47 @@ +import type { TemplateRef } from '@angular/core'; + +import type { SFUISchemaItem } from '@delon/form'; +import type { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from 'ng-zorro-antd/color-picker'; + +export interface SFColorWidgetSchema extends SFUISchemaItem { + /** + * Format of color + */ + format?: NzColorPickerFormatType | null; + /** + * Default value of color + */ + defaultValue?: string | NzColor | null; + /** + * ColorPicker trigger mode + */ + trigger?: NzColorPickerTriggerType | null; + /** + * Setting the title of the color picker + */ + title?: TemplateRef | string; + /** + * Triggers for customizing color panels. + */ + flipFlop?: TemplateRef | string | null; + /** + * Show color text + */ + showText?: boolean; + /** + * Allow clearing color selected + */ + allowClear?: boolean; + /** + * Callback when value is changed + */ + change?: (ev: { color: NzColor; format: string }) => void; + /** + * Callback when `format` is changed + */ + formatChange?: (color: NzColorPickerFormatType) => void; + /** + * Color Block + */ + block?: boolean; +} diff --git a/packages/form/widgets/color/widget.spec.ts b/packages/form/widgets/color/widget.spec.ts new file mode 100644 index 000000000..b5f9825fe --- /dev/null +++ b/packages/form/widgets/color/widget.spec.ts @@ -0,0 +1,49 @@ +import { DebugElement } from '@angular/core'; +import { ComponentFixture, fakeAsync } from '@angular/core/testing'; + +import { SFSchema } from '@delon/form'; +import { createTestContext } from '@delon/testing'; + +import { ColorWidgetModule, SFColorWidgetSchema } from './index'; +import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec'; + +describe('form: widget: color', () => { + let fixture: ComponentFixture; + let dl: DebugElement; + let context: TestFormComponent; + let page: SFPage; + + configureSFTestSuite({ imports: [ColorWidgetModule] }); + + beforeEach(() => { + ({ fixture, dl, context } = createTestContext(TestFormComponent)); + page = new SFPage(context.comp); + page.cleanOverlay().prop(dl, context, fixture); + }); + + it('should be working', fakeAsync(() => { + const change = jasmine.createSpy(); + const formatChange = jasmine.createSpy(); + const s: SFSchema = { + properties: { + a: { + type: 'string', + ui: { + widget: 'color', + defaultValue: '#f50', + change, + formatChange + } as SFColorWidgetSchema + } + } + }; + page + .newSchema(s) + .typeEvent('click', '.ant-color-picker-trigger') + .typeEvent('click', 'nz-select') + .typeEvent('click', 'nz-option-container nz-option-item:nth-child(2)'); + expect(page.getValue('/a')).toBe('hsb(20, 100%, 100%)'); + expect(change).toHaveBeenCalled(); + expect(formatChange).toHaveBeenCalled(); + })); +}); diff --git a/packages/form/widgets/color/widget.ts b/packages/form/widgets/color/widget.ts new file mode 100644 index 000000000..eebad6c6a --- /dev/null +++ b/packages/form/widgets/color/widget.ts @@ -0,0 +1,49 @@ +import { Component, ViewEncapsulation } from '@angular/core'; + +import { ControlUIWidget } from '@delon/form'; +import type { NzColor, NzColorPickerFormatType } from 'ng-zorro-antd/color-picker'; + +import type { SFColorWidgetSchema } from './schema'; + +@Component({ + selector: 'sf-color', + template: ` + + + `, + preserveWhitespaces: false, + encapsulation: ViewEncapsulation.None +}) +export class ColorWidget extends ControlUIWidget { + static readonly KEY = 'color'; + + _change(ev: { color: NzColor; format: string }): void { + if (this.ui.change) this.ui.change(ev); + } + + _formatChange(ev: NzColorPickerFormatType): void { + if (this.ui.formatChange) this.ui.formatChange(ev); + } +} diff --git a/scripts/site/route-paths.txt b/scripts/site/route-paths.txt index ba61a837f..2d5bc2f1f 100644 --- a/scripts/site/route-paths.txt +++ b/scripts/site/route-paths.txt @@ -203,6 +203,8 @@ /form/cascader/zh /form/checkbox/en /form/checkbox/zh +/form/color/en +/form/color/zh /form/conditional/en /form/conditional/zh /form/custom/en diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts index 66fc20581..4c615b7b3 100644 --- a/src/app/shared/json-schema/json-schema.module.ts +++ b/src/app/shared/json-schema/json-schema.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { DelonFormModule } from '@delon/form'; import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete'; import { CascaderWidgetModule } from '@delon/form/widgets/cascader'; +import { ColorWidgetModule } from '@delon/form/widgets/color'; import { MentionWidgetModule } from '@delon/form/widgets/mention'; import { RateWidgetModule } from '@delon/form/widgets/rate'; import { SliderWidgetModule } from '@delon/form/widgets/slider'; @@ -30,6 +31,7 @@ import { SharedModule } from '../shared.module'; TagWidgetModule, TimeWidgetModule, UploadWidgetModule, + ColorWidgetModule, MonacoEditorWidgetModule, TinymceWidgetModule ]