diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html index 4f77dd0cf7..46dcd5bede 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html @@ -179,4 +179,7 @@ } {{ asterisk }} + @if (prop.tooltip) { + + } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts index 37f05a892e..1805d87233 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts @@ -49,6 +49,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; import { ExtensibleFormPropService } from '../../services/extensible-form-prop.service'; import { CreateInjectorPipe } from '../../pipes/create-injector.pipe'; import { CommonModule } from '@angular/common'; +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'abp-extensible-form-prop', @@ -61,6 +62,7 @@ import { CommonModule } from '@angular/common'; ReactiveFormsModule, DisabledDirective, NgxValidateCoreModule, + NgbTooltip, NgbTypeaheadModule, CreateInjectorPipe, ShowPasswordDirective, diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 0ba4b22d45..5b28627085 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -31,9 +31,10 @@ > @if (prop.tooltip) { - - {{ column.name }} - + + {{ column.name }} + }@else{ {{ column.name }} } diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts index e86e3ae34e..7692457cd8 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/models/entity-props.ts @@ -12,6 +12,7 @@ import { Props, PropsFactory, } from './props'; +import { FormPropTooltip } from './form-props'; export class EntityPropList extends PropList> {} @@ -30,7 +31,7 @@ export class EntityProp extends Prop { readonly action?: ActionCallback; readonly component?: Type; readonly enumList?: Array>; - readonly tooltip?: string; + readonly tooltip?: FormPropTooltip; readonly columnVisible: ColumnPredicate; constructor(options: EntityPropOptions) { diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts index 3ad64e8a13..25ea4ab1bc 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/models/form-props.ts @@ -27,6 +27,11 @@ export interface FormPropGroup { className?: string; } +export interface FormPropTooltip { + text: string; + placement?: 'top' | 'end' | 'bottom' | 'start'; +} + export class GroupedFormPropList { public readonly items: GroupedFormPropItem[] = []; addItem(item: FormProp) { @@ -72,6 +77,7 @@ export class FormProp extends Prop { readonly group?: FormPropGroup | undefined; readonly displayTextResolver?: PropDisplayTextResolver; readonly formText?: string; + readonly tooltip?: FormPropTooltip; constructor(options: FormPropOptions) { super( @@ -84,10 +90,12 @@ export class FormProp extends Prop { options.template, options.className, options.formText, + options.tooltip, ); this.group = options.group; this.className = options.className; this.formText = options.formText; + this.tooltip = options.tooltip; this.asyncValidators = options.asyncValidators || (_ => []); this.validators = options.validators || (_ => []); this.disabled = options.disabled || (_ => false); @@ -135,6 +143,7 @@ export type FormPropOptions = O.Optional< | 'id' | 'displayTextResolver' | 'formText' + | 'tooltip' >; export type CreateFormPropDefaults = Record[]>; diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts index 799702bc70..2c88bd9939 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts +++ b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts @@ -2,6 +2,7 @@ import { LinkedList } from '@abp/utils'; import { InjectFlags, InjectionToken, InjectOptions, Type } from '@angular/core'; import { O } from 'ts-toolbelt'; import { ePropType } from '../enums/props.enum'; +import { FormPropTooltip } from './form-props'; export abstract class PropList> extends LinkedList {} @@ -36,6 +37,7 @@ export abstract class Prop { public readonly template?: Type, public readonly className?: string, public readonly formText?: string, + public readonly tooltip?: FormPropTooltip, public readonly displayTextResolver?: PropDisplayTextResolver, ) { this.displayName = this.displayName || this.name;