From 8f1f3747782a181061fa42bb84563759ab7a4670 Mon Sep 17 00:00:00 2001 From: ng-nest-moon Date: Sat, 2 Nov 2024 22:09:29 +0800 Subject: [PATCH] feat(module:message-box): add textarea component --- lib/ng-nest/ui/message-box/examples/index.ts | 1 + .../examples/zh_CN/default/textarea/readme.md | 6 ++ .../default/textarea/textarea.component.html | 4 ++ .../default/textarea/textarea.component.ts | 63 +++++++++++++++++++ .../ui/message-box/message-box.component.html | 13 ++++ .../ui/message-box/message-box.component.ts | 7 ++- .../ui/message-box/message-box.property.ts | 19 +++++- .../ui/message-box/message-box.service.ts | 11 +++- lib/ng-nest/ui/message-box/style/mixin.scss | 4 ++ lib/ng-nest/ui/textarea/textarea.property.ts | 5 ++ src/environments/environment.development.ts | 2 +- .../message-box/message-box.component.html | 7 ++- .../test/message-box/message-box.component.ts | 5 +- 13 files changed, 136 insertions(+), 11 deletions(-) create mode 100644 lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md create mode 100644 lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html create mode 100644 lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts diff --git a/lib/ng-nest/ui/message-box/examples/index.ts b/lib/ng-nest/ui/message-box/examples/index.ts index 16cb95cb4..7042937f5 100644 --- a/lib/ng-nest/ui/message-box/examples/index.ts +++ b/lib/ng-nest/ui/message-box/examples/index.ts @@ -2,3 +2,4 @@ export * from './zh_CN/default/confirm/confirm.component'; export * from './zh_CN/default/custom/custom.component'; export * from './zh_CN/default/default/default.component'; export * from './zh_CN/default/prompt/prompt.component'; +export * from './zh_CN/default/textarea/textarea.component'; diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md new file mode 100644 index 000000000..aa4bc9dc6 --- /dev/null +++ b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/readme.md @@ -0,0 +1,6 @@ +--- +order: 5 +label: '提交内容(多行)' +--- + +使用 `XMessageBoxService` 中的 `prompt` 方法来弹出可输入的消息框。 diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html new file mode 100644 index 000000000..49af9835b --- /dev/null +++ b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.html @@ -0,0 +1,4 @@ +提交内容(正则验证) +
+
+提交内容(自定义验证) diff --git a/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts new file mode 100644 index 000000000..97eaefe6e --- /dev/null +++ b/lib/ng-nest/ui/message-box/examples/zh_CN/default/textarea/textarea.component.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; +import { XMessageBoxService, XMessageBoxAction } from '@ng-nest/ui/message-box'; +import { XMessageService } from '@ng-nest/ui/message'; +import { XButtonComponent } from '@ng-nest/ui/button'; + +@Component({ + selector: 'ex-textarea', + standalone: true, + imports: [XButtonComponent], + templateUrl: './textarea.component.html' +}) +export class ExTextareaComponent { + constructor( + private msgBox: XMessageBoxService, + private message: XMessageService + ) {} + prompt1() { + this.msgBox.prompt({ + title: '提交内容', + content: '请输入邮箱', + showTextarea: true, + inputValue: 'ngnest@163', + inputPattern: + /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, + inputInvalidMessage: '邮箱格式不正确', + callback: (action: XMessageBoxAction, msg) => { + if (action === 'confirm') { + // 业务处理...... + this.message.success('邮箱：' + msg); + } else if (action === 'close') { + this.message.info('已关闭窗口！'); + } else if (action === 'cancel') { + this.message.info('已取消窗口！'); + } + } + }); + } + prompt2() { + this.msgBox.prompt({ + title: '提交内容', + content: '请输入邮箱', + showTextarea: true, + inputValue: 'ngnest@163', + inputValidator: (value: string) => { + let reg = new RegExp( + /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/ + ); + return reg.test(value); + }, + inputInvalidMessage: '邮箱格式不正确', + callback: (action: XMessageBoxAction, msg) => { + if (action === 'confirm') { + // 业务处理...... + this.message.success('邮箱：' + msg); + } else if (action === 'close') { + this.message.info('已关闭窗口！'); + } else if (action === 'cancel') { + this.message.info('已取消窗口！'); + } + } + }); + } +} diff --git a/lib/ng-nest/ui/message-box/message-box.component.html b/lib/ng-nest/ui/message-box/message-box.component.html index 544ab5d90..bfa25c04a 100644 --- a/lib/ng-nest/ui/message-box/message-box.component.html +++ b/lib/ng-nest/ui/message-box/message-box.component.html @@ -32,6 +32,19 @@ [inputValidator]="msgInput.inputValidator!" > + } @else if (msgInput.showTextarea) { +
+ +
} @else { @if (msgInput.showIcon) { diff --git a/lib/ng-nest/ui/message-box/message-box.component.ts b/lib/ng-nest/ui/message-box/message-box.component.ts index c8ed96758..bd9bc8eac 100644 --- a/lib/ng-nest/ui/message-box/message-box.component.ts +++ b/lib/ng-nest/ui/message-box/message-box.component.ts @@ -17,6 +17,7 @@ import { XIconComponent } from '@ng-nest/ui/icon'; import { XInputComponent } from '@ng-nest/ui/input'; import { XOutletDirective } from '@ng-nest/ui/outlet'; import { NgTemplateOutlet } from '@angular/common'; +import { XTextareaComponent } from '@ng-nest/ui/textarea'; @Component({ selector: `${XMessageBoxPrefix}`, @@ -26,6 +27,7 @@ import { NgTemplateOutlet } from '@angular/common'; FormsModule, ReactiveFormsModule, XInputComponent, + XTextareaComponent, XButtonComponent, XButtonsComponent, XIconComponent, @@ -66,7 +68,7 @@ export class XMessageBoxComponent implements OnInit { } ngOnInit() { - this.msgInput.showInput && this.createFormGroup(); + (this.msgInput.showInput || this.msgInput.showTextarea) && this.createFormGroup(); } onClose() { @@ -100,6 +102,9 @@ export class XMessageBoxComponent implements OnInit { if (!this.msgInput.showInput || (this.msgInput.showInput && this.formGroup.valid)) { this.action = 'confirm'; this.hideBox(); + } else if (!this.msgInput.showTextarea || (this.msgInput.showTextarea && this.formGroup.valid)) { + this.action = 'confirm'; + this.hideBox(); } }; if (this.msgInput.confirmLoading && XIsFunction(this.msgInput.confirmLoading)) { diff --git a/lib/ng-nest/ui/message-box/message-box.property.ts b/lib/ng-nest/ui/message-box/message-box.property.ts index f723ae0ab..913d67555 100644 --- a/lib/ng-nest/ui/message-box/message-box.property.ts +++ b/lib/ng-nest/ui/message-box/message-box.property.ts @@ -88,8 +88,8 @@ export interface XMessageBoxOption extends XAlertOption { */ cancelText?: string; /** - * @zh_CN 是否显示输入框 - * @en_US Whether to show the input box + * @zh_CN 是否显示输入框，显示单行文本框后，将不能显示多行文本框 + * @en_US Do not display input box. After displaying a single line text box, multi line text boxes cannot be displayed */ showInput?: boolean; /** @@ -132,6 +132,21 @@ export interface XMessageBoxOption extends XAlertOption { * @en_US confirm Loading */ confirmLoading?: XMessageBoxConfirmLoading; + /** + * @zh_CN 是否显示多行文本框 + * @en_US Whether to show the input box + */ + showTextarea?: boolean; + /** + * @zh_CN 输入最大长度 + * @en_US Enter the maximum length + */ + textareaMaxlength?: number; + /** + * @zh_CN 高度 + * @en_US height + */ + textareaHeight?: string; } /** diff --git a/lib/ng-nest/ui/message-box/message-box.service.ts b/lib/ng-nest/ui/message-box/message-box.service.ts index e954c9c83..8b3fd48d4 100644 --- a/lib/ng-nest/ui/message-box/message-box.service.ts +++ b/lib/ng-nest/ui/message-box/message-box.service.ts @@ -16,11 +16,13 @@ export class XMessageBoxService { duration: 3000, showIcon: false, showInput: false, + showTextarea: false, backdropClose: false, cancelText: '取消', confirmText: '确认', inputPlaceholder: '', - hide: false + hide: false, + textareaHeight: '6rem' }; private portal = inject(XPortalService); @@ -35,7 +37,12 @@ export class XMessageBoxService { } prompt(option: XTemplate | XMessageBoxOption): XMessageBoxRef { - return this.createMessageBox(option, { showIcon: false, showCancel: true, showInput: true }); + const opt = option as XMessageBoxOption; + let def: XMessageBoxOption = { showIcon: false, showCancel: true, showInput: true }; + if (!opt.showInput && opt.showTextarea) { + def = { showIcon: false, showCancel: true, showTextarea: true }; + } + return this.createMessageBox(option, def); } create(option: XMessageBoxOption): XMessageBoxOverlayRef { diff --git a/lib/ng-nest/ui/message-box/style/mixin.scss b/lib/ng-nest/ui/message-box/style/mixin.scss index c12b441f4..c886d0385 100644 --- a/lib/ng-nest/ui/message-box/style/mixin.scss +++ b/lib/ng-nest/ui/message-box/style/mixin.scss @@ -18,9 +18,13 @@ display: inline-flex; > form { width: 100%; + margin-bottom: 1rem; > x-input { width: 100%; } + > x-textarea { + width: 100%; + } } } } diff --git a/lib/ng-nest/ui/textarea/textarea.property.ts b/lib/ng-nest/ui/textarea/textarea.property.ts index bdb1033ee..651fb5d10 100644 --- a/lib/ng-nest/ui/textarea/textarea.property.ts +++ b/lib/ng-nest/ui/textarea/textarea.property.ts @@ -46,6 +46,11 @@ export class XTextareaProperty extends XFormControlFunction(X_TEXTAREA_CONFIG_NA * @en_US height */ readonly height = input('6rem', { transform: XToCssPixelValue }); + /** + * @zh_CN 输入提示信息 + * @en_US Enter prompt information + */ + override readonly placeholder = input(''); /** * @zh_CN 标签 * @en_US Label diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts index f0f66d4a3..8e944a58f 100644 --- a/src/environments/environment.development.ts +++ b/src/environments/environment.development.ts @@ -1,5 +1,5 @@ export const environment = { layout: 'test', - defaultPage: 'select', + defaultPage: 'message-box', static: 'https://ngnest.com/static' }; diff --git a/src/main/test/message-box/message-box.component.html b/src/main/test/message-box/message-box.component.html index 77453965b..2ad1fd456 100644 --- a/src/main/test/message-box/message-box.component.html +++ b/src/main/test/message-box/message-box.component.html @@ -1,4 +1,5 @@ - - - + + + + diff --git a/src/main/test/message-box/message-box.component.ts b/src/main/test/message-box/message-box.component.ts index 145af7bf4..8f71becb5 100644 --- a/src/main/test/message-box/message-box.component.ts +++ b/src/main/test/message-box/message-box.component.ts @@ -3,13 +3,14 @@ import { ExDefaultComponent, ExConfirmComponent, ExCustomComponent, - ExPromptComponent + ExPromptComponent, + ExTextareaComponent } from '@ng-nest/ui/message-box/examples'; @Component({ selector: 'te-message-box', standalone: true, - imports: [ExDefaultComponent, ExConfirmComponent, ExCustomComponent, ExPromptComponent], + imports: [ExDefaultComponent, ExConfirmComponent, ExCustomComponent, ExPromptComponent, ExTextareaComponent], templateUrl: './message-box.component.html' }) export class TeMessageBoxComponent {}