@ai-table/grid 0.0.37 → 0.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/cell-editors/text/text-editor.component.d.ts +1 -0
- package/components/cell-editors/text/text-editor.component.d.ts.map +1 -1
- package/components/field-menu/field-menu.component.d.ts.map +1 -1
- package/components/field-setting/field-setting.component.d.ts +12 -8
- package/components/field-setting/field-setting.component.d.ts.map +1 -1
- package/core/constants/field.d.ts +4 -0
- package/core/constants/field.d.ts.map +1 -1
- package/core/types/core.d.ts +1 -0
- package/core/types/core.d.ts.map +1 -1
- package/core/utils/field.d.ts.map +1 -1
- package/esm2022/components/cell-editors/text/text-editor.component.mjs +6 -3
- package/esm2022/components/field-menu/field-menu.component.mjs +3 -11
- package/esm2022/components/field-setting/field-setting.component.mjs +48 -28
- package/esm2022/core/constants/field.mjs +20 -22
- package/esm2022/core/types/core.mjs +1 -1
- package/esm2022/core/utils/field.mjs +8 -4
- package/esm2022/pipes/grid.pipe.mjs +9 -11
- package/esm2022/renderer/components/cells/link.component.mjs +2 -1
- package/esm2022/renderer/drawers/cell-drawer.mjs +13 -6
- package/fesm2022/ai-table-grid.mjs +94 -74
- package/fesm2022/ai-table-grid.mjs.map +1 -1
- package/package.json +1 -1
- package/pipes/grid.pipe.d.ts +5 -5
- package/pipes/grid.pipe.d.ts.map +1 -1
- package/renderer/components/cells/link.component.d.ts.map +1 -1
- package/renderer/drawers/cell-drawer.d.ts +1 -0
- package/renderer/drawers/cell-drawer.d.ts.map +1 -1
@@ -26,14 +26,14 @@ import { ThyInputNumber } from 'ngx-tethys/input-number';
|
|
26
26
|
import { ThySlider } from 'ngx-tethys/slider';
|
27
27
|
import { ThyRate } from 'ngx-tethys/rate';
|
28
28
|
import * as i1$2 from '@angular/common';
|
29
|
-
import { NgTemplateOutlet,
|
29
|
+
import { NgTemplateOutlet, NgClass, CommonModule, NgComponentOutlet } from '@angular/common';
|
30
30
|
import { ThyDot } from 'ngx-tethys/dot';
|
31
31
|
import { ThyEmptyModule } from 'ngx-tethys/empty';
|
32
32
|
import { ThyIcon } from 'ngx-tethys/icon';
|
33
33
|
import { ThySelect } from 'ngx-tethys/select';
|
34
34
|
import { ThyTag } from 'ngx-tethys/tag';
|
35
|
-
import {
|
36
|
-
import {
|
35
|
+
import { ThyDropdownMenuComponent, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu } from 'ngx-tethys/dropdown';
|
36
|
+
import { ThySwitch } from 'ngx-tethys/switch';
|
37
37
|
import { of, Subject, fromEvent, debounceTime, mergeWith, filter } from 'rxjs';
|
38
38
|
import * as i4 from 'ngx-tethys/avatar';
|
39
39
|
import { ThyAvatarModule } from 'ngx-tethys/avatar';
|
@@ -195,25 +195,29 @@ var Direction;
|
|
195
195
|
Direction["after"] = "after";
|
196
196
|
})(Direction || (Direction = {}));
|
197
197
|
|
198
|
+
const AI_TABLE_FIELD_MINI_WIDTH = 140;
|
199
|
+
const AI_TABLE_FIELD_MIN_WIDTH = 160;
|
200
|
+
const AI_TABLE_FIELD_MIDDLE_WIDTH = 200;
|
201
|
+
const AI_TABLE_FIELD_MAX_WIDTH = 300;
|
198
202
|
const FieldOptions = [
|
199
203
|
{
|
200
204
|
type: AITableFieldType.text,
|
201
205
|
name: '单行文本',
|
202
206
|
icon: 'font',
|
203
|
-
width:
|
207
|
+
width: AI_TABLE_FIELD_MAX_WIDTH
|
204
208
|
},
|
205
209
|
// 多行文本
|
206
210
|
{
|
207
211
|
type: AITableFieldType.select,
|
208
212
|
name: '单选',
|
209
213
|
icon: 'check-circle',
|
210
|
-
width:
|
214
|
+
width: AI_TABLE_FIELD_MIN_WIDTH
|
211
215
|
},
|
212
216
|
{
|
213
217
|
type: AITableFieldType.select,
|
214
218
|
name: '多选',
|
215
219
|
icon: 'list-check',
|
216
|
-
width:
|
220
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH,
|
217
221
|
settings: {
|
218
222
|
is_multiple: true
|
219
223
|
}
|
@@ -222,27 +226,21 @@ const FieldOptions = [
|
|
222
226
|
type: AITableFieldType.number,
|
223
227
|
name: '数字',
|
224
228
|
icon: 'hashtag',
|
225
|
-
width:
|
229
|
+
width: AI_TABLE_FIELD_MINI_WIDTH
|
226
230
|
},
|
227
231
|
{
|
228
232
|
type: AITableFieldType.date,
|
229
233
|
name: '日期',
|
230
234
|
icon: 'calendar',
|
231
|
-
width:
|
235
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH
|
232
236
|
},
|
233
237
|
{
|
234
238
|
type: AITableFieldType.member,
|
235
|
-
name: '
|
239
|
+
name: '成员',
|
236
240
|
icon: 'user',
|
237
|
-
width:
|
238
|
-
},
|
239
|
-
{
|
240
|
-
type: AITableFieldType.member,
|
241
|
-
name: '多个成员',
|
242
|
-
icon: 'user',
|
243
|
-
width: 200,
|
241
|
+
width: AI_TABLE_FIELD_MIN_WIDTH,
|
244
242
|
settings: {
|
245
|
-
is_multiple:
|
243
|
+
is_multiple: false
|
246
244
|
}
|
247
245
|
},
|
248
246
|
// 级联单选
|
@@ -251,43 +249,43 @@ const FieldOptions = [
|
|
251
249
|
type: AITableFieldType.progress,
|
252
250
|
name: '进度',
|
253
251
|
icon: 'progress',
|
254
|
-
width:
|
252
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH
|
255
253
|
},
|
256
254
|
{
|
257
255
|
type: AITableFieldType.rate,
|
258
256
|
name: '评分',
|
259
257
|
icon: 'star-circle',
|
260
|
-
width:
|
258
|
+
width: AI_TABLE_FIELD_MIN_WIDTH
|
261
259
|
},
|
262
260
|
{
|
263
261
|
type: AITableFieldType.link,
|
264
262
|
name: '链接',
|
265
263
|
icon: 'link-insert',
|
266
|
-
width:
|
264
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH
|
267
265
|
},
|
268
266
|
{
|
269
267
|
type: AITableFieldType.createdBy,
|
270
268
|
name: '创建人',
|
271
269
|
icon: 'user',
|
272
|
-
width:
|
270
|
+
width: AI_TABLE_FIELD_MIN_WIDTH
|
273
271
|
},
|
274
272
|
{
|
275
273
|
type: AITableFieldType.createdAt,
|
276
274
|
name: '创建时间',
|
277
275
|
icon: 'calendar',
|
278
|
-
width:
|
276
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH
|
279
277
|
},
|
280
278
|
{
|
281
279
|
type: AITableFieldType.updatedBy,
|
282
280
|
name: '更新人',
|
283
281
|
icon: 'user',
|
284
|
-
width:
|
282
|
+
width: AI_TABLE_FIELD_MIN_WIDTH
|
285
283
|
},
|
286
284
|
{
|
287
285
|
type: AITableFieldType.updatedAt,
|
288
286
|
name: '更新时间',
|
289
287
|
icon: 'calendar',
|
290
|
-
width:
|
288
|
+
width: AI_TABLE_FIELD_MIDDLE_WIDTH
|
291
289
|
}
|
292
290
|
];
|
293
291
|
|
@@ -692,11 +690,15 @@ function createDefaultFieldName(aiTable, field) {
|
|
692
690
|
return FieldOptions[0].name;
|
693
691
|
}
|
694
692
|
function getFieldOptionByField(field) {
|
695
|
-
|
693
|
+
let fieldOption = FieldOptions.find((item) => isSameFieldOption(item, field));
|
694
|
+
if (fieldOption && field.type === AITableFieldType.member && field.settings?.is_multiple) {
|
695
|
+
fieldOption.width = AI_TABLE_FIELD_MIDDLE_WIDTH;
|
696
|
+
}
|
697
|
+
return fieldOption;
|
696
698
|
}
|
697
699
|
function isSameFieldOption(fieldOption, field) {
|
698
700
|
return (fieldOption.type === field.type &&
|
699
|
-
(fieldOption.type === AITableFieldType.select
|
701
|
+
(fieldOption.type === AITableFieldType.select
|
700
702
|
? !!fieldOption.settings?.is_multiple === !!field.settings?.is_multiple
|
701
703
|
: true));
|
702
704
|
}
|
@@ -1328,20 +1330,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1328
1330
|
standalone: true
|
1329
1331
|
}]
|
1330
1332
|
}] });
|
1331
|
-
class
|
1332
|
-
transform(
|
1333
|
-
|
1334
|
-
return !!settings.is_multiple;
|
1335
|
-
}
|
1336
|
-
return false;
|
1333
|
+
class AITableFieldIsSameOptionPipe {
|
1334
|
+
transform(fieldOption, field) {
|
1335
|
+
return isSameFieldOption(fieldOption, field);
|
1337
1336
|
}
|
1338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
1339
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type:
|
1337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
1338
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, isStandalone: true, name: "fieldIsSameOption" }); }
|
1340
1339
|
}
|
1341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, decorators: [{
|
1342
1341
|
type: Pipe,
|
1343
1342
|
args: [{
|
1344
|
-
name: '
|
1343
|
+
name: 'fieldIsSameOption',
|
1345
1344
|
standalone: true
|
1346
1345
|
}]
|
1347
1346
|
}] });
|
@@ -1426,6 +1425,7 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
|
|
1426
1425
|
super();
|
1427
1426
|
this.render2 = inject(Renderer2);
|
1428
1427
|
this.maxHeight = 148;
|
1428
|
+
this.minHeight = 24;
|
1429
1429
|
}
|
1430
1430
|
ngAfterViewInit() {
|
1431
1431
|
setTimeout(() => {
|
@@ -1435,9 +1435,11 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
|
|
1435
1435
|
updateStyle() {
|
1436
1436
|
const textarea = this.elementRef.nativeElement.querySelector('textarea');
|
1437
1437
|
if (textarea) {
|
1438
|
-
|
1438
|
+
this.render2.setStyle(textarea, 'height', 'auto');
|
1439
|
+
const scrollHeight = textarea.scrollHeight;
|
1440
|
+
const newHeight = Math.max(this.minHeight, Math.min(scrollHeight, this.maxHeight)) + 4;
|
1439
1441
|
this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`);
|
1440
|
-
this.render2.setStyle(textarea, 'height', `${
|
1442
|
+
this.render2.setStyle(textarea, 'height', `${newHeight}px`);
|
1441
1443
|
this.render2.setStyle(textarea, 'resize', 'none');
|
1442
1444
|
}
|
1443
1445
|
}
|
@@ -1490,7 +1492,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1490
1492
|
class AITableFieldSetting {
|
1491
1493
|
constructor() {
|
1492
1494
|
this.aiEditField = model.required();
|
1493
|
-
this.
|
1495
|
+
this.aiTable = input.required();
|
1496
|
+
this.aiExternalTemplate = input(null);
|
1497
|
+
this.isUpdate = input(false, { transform: booleanAttribute });
|
1494
1498
|
this.addField = output();
|
1495
1499
|
this.setField = output();
|
1496
1500
|
this.selectedFieldOption = computed(() => {
|
@@ -1505,23 +1509,34 @@ class AITableFieldSetting {
|
|
1505
1509
|
}
|
1506
1510
|
}
|
1507
1511
|
};
|
1508
|
-
this.fieldOptions = FieldOptions;
|
1512
|
+
this.fieldOptions = _.cloneDeep(FieldOptions);
|
1513
|
+
this.aITableFieldType = AITableFieldType;
|
1514
|
+
this.isMultipleMember = false;
|
1509
1515
|
this.thyPopoverRef = inject((ThyPopoverRef));
|
1510
1516
|
this.checkUniqueName = (fieldName) => {
|
1511
1517
|
fieldName = fieldName?.trim();
|
1512
|
-
return of(!!this.aiTable
|
1518
|
+
return of(!!this.aiTable()
|
1519
|
+
.fields()
|
1520
|
+
?.find((field) => field.name === fieldName && this.aiEditField()?._id !== field._id));
|
1513
1521
|
};
|
1514
1522
|
}
|
1523
|
+
ngOnInit() {
|
1524
|
+
this.isMultipleMember =
|
1525
|
+
this.aiEditField().type === AITableFieldType.member && !!this.aiEditField().settings?.is_multiple;
|
1526
|
+
}
|
1515
1527
|
selectFieldType(field) {
|
1516
1528
|
this.aiEditField.update((item) => {
|
1517
1529
|
const width = item.width ?? field.width;
|
1518
1530
|
const settings = field.settings || {};
|
1519
|
-
const name = createDefaultFieldName(this.aiTable, field);
|
1520
|
-
return { ...item, ...field, width, name,
|
1531
|
+
const name = createDefaultFieldName(this.aiTable(), field);
|
1532
|
+
return { ...item, ...field, width, name, settings };
|
1521
1533
|
});
|
1534
|
+
setTimeout(() => {
|
1535
|
+
this.thyPopoverRef.updatePosition();
|
1536
|
+
}, 0);
|
1522
1537
|
}
|
1523
1538
|
editFieldProperty() {
|
1524
|
-
if (this.isUpdate) {
|
1539
|
+
if (this.isUpdate()) {
|
1525
1540
|
this.setField.emit({
|
1526
1541
|
field: this.aiEditField(),
|
1527
1542
|
path: [this.aiEditField()._id]
|
@@ -1532,16 +1547,28 @@ class AITableFieldSetting {
|
|
1532
1547
|
}
|
1533
1548
|
this.thyPopoverRef.close();
|
1534
1549
|
}
|
1550
|
+
multipleMemberChange() {
|
1551
|
+
this.aiEditField.set({
|
1552
|
+
...this.aiEditField(),
|
1553
|
+
settings: {
|
1554
|
+
...(this.aiEditField().settings || {}),
|
1555
|
+
is_multiple: this.isMultipleMember
|
1556
|
+
}
|
1557
|
+
});
|
1558
|
+
}
|
1559
|
+
fieldTypeClick(e) {
|
1560
|
+
e.preventDefault();
|
1561
|
+
e.stopPropagation();
|
1562
|
+
}
|
1535
1563
|
cancel() {
|
1536
1564
|
this.thyPopoverRef.close();
|
1537
1565
|
}
|
1538
1566
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal:
|
1567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"thy-dropdown-menu py-0\">\n <div class=\"ml-n5 mr-n5\">\n <span\n thyDropdownMenuItem\n [thyDropdown]=\"menu\"\n [thyDisabled]=\"isUpdate()\"\n thyTrigger=\"hover\"\n thyPlacement=\"right\"\n (click)=\"fieldTypeClick($event)\"\n >\n <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </span>\n </div>\n </div>\n\n @if (selectedFieldOption().type === aITableFieldType.member) {\n <div class=\"d-flex justify-content-between mt-3\">\n \u5141\u8BB8\u9009\u62E9\u591A\u4E2A\u6210\u5458\n <thy-switch\n name=\"isMultipleMember\"\n [thyDisabled]=\"isUpdate()\"\n [(ngModel)]=\"isMultipleMember\"\n (ngModelChange)=\"multipleMemberChange()\"\n thySize=\"sm\"\n ></thy-switch>\n </div>\n }\n </thy-form-group>\n @if (aiExternalTemplate()) {\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n }\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of fieldOptions; track $index) {\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{\n active: (item | fieldIsSameOption: aiEditField())\n }\"\n (click)=\"selectFieldType(item)\"\n >\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1540
1568
|
}
|
1541
1569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, decorators: [{
|
1542
1570
|
type: Component,
|
1543
1571
|
args: [{ selector: 'ai-table-field-setting', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
1544
|
-
NgIf,
|
1545
1572
|
NgClass,
|
1546
1573
|
FormsModule,
|
1547
1574
|
ThyIcon,
|
@@ -1549,28 +1576,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1549
1576
|
ThyInputCount,
|
1550
1577
|
ThyInputDirective,
|
1551
1578
|
ThyUniqueCheckValidator,
|
1552
|
-
ThyDropdownDirective,
|
1553
1579
|
ThyDropdownMenuComponent,
|
1580
|
+
ThyDropdownDirective,
|
1554
1581
|
ThyDropdownMenuItemDirective,
|
1582
|
+
ThyDropdownMenuItemIconDirective,
|
1555
1583
|
ThyDropdownMenuItemNameDirective,
|
1584
|
+
ThyDropdownMenuItemExtendIconDirective,
|
1556
1585
|
ThyButton,
|
1586
|
+
ThySwitch,
|
1557
1587
|
ThyFormModule,
|
1558
|
-
ThyListItem,
|
1559
1588
|
NgTemplateOutlet,
|
1560
1589
|
ThyAutofocusDirective,
|
1561
|
-
|
1590
|
+
AITableFieldIsSameOptionPipe
|
1562
1591
|
], host: {
|
1563
1592
|
class: 'field-setting d-block pl-5 pr-5 pb-5 pt-4'
|
1564
|
-
}, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"ml-n5 mr-n5\">\n
|
1565
|
-
}]
|
1566
|
-
type: Input,
|
1567
|
-
args: [{ required: true }]
|
1568
|
-
}], aiExternalTemplate: [{
|
1569
|
-
type: Input
|
1570
|
-
}], isUpdate: [{
|
1571
|
-
type: Input,
|
1572
|
-
args: [{ transform: booleanAttribute }]
|
1573
|
-
}] } });
|
1593
|
+
}, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n <thy-input-group>\n <input\n thyInput\n [thyAutofocus]=\"true\"\n name=\"fieldName\"\n [maxlength]=\"fieldMaxLength\"\n [(ngModel)]=\"aiEditField().name\"\n required\n placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n [thyUniqueCheck]=\"checkUniqueName\"\n />\n <ng-template #suffix>\n <thy-input-count></thy-input-count>\n </ng-template>\n </thy-input-group>\n </thy-form-group>\n <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n <div class=\"thy-dropdown-menu py-0\">\n <div class=\"ml-n5 mr-n5\">\n <span\n thyDropdownMenuItem\n [thyDropdown]=\"menu\"\n [thyDisabled]=\"isUpdate()\"\n thyTrigger=\"hover\"\n thyPlacement=\"right\"\n (click)=\"fieldTypeClick($event)\"\n >\n <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n </span>\n </div>\n </div>\n\n @if (selectedFieldOption().type === aITableFieldType.member) {\n <div class=\"d-flex justify-content-between mt-3\">\n \u5141\u8BB8\u9009\u62E9\u591A\u4E2A\u6210\u5458\n <thy-switch\n name=\"isMultipleMember\"\n [thyDisabled]=\"isUpdate()\"\n [(ngModel)]=\"isMultipleMember\"\n (ngModelChange)=\"multipleMemberChange()\"\n thySize=\"sm\"\n ></thy-switch>\n </div>\n }\n </thy-form-group>\n @if (aiExternalTemplate()) {\n <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n }\n <thy-form-group-footer thyAlign=\"right\">\n <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n @for (item of fieldOptions; track $index) {\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{\n active: (item | fieldIsSameOption: aiEditField())\n }\"\n (click)=\"selectFieldType(item)\"\n >\n <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n <span thyDropdownMenuItemName>{{ item.name }}</span>\n </a>\n }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
|
1594
|
+
}] });
|
1574
1595
|
|
1575
1596
|
class AITableGridSelectionService {
|
1576
1597
|
constructor() {
|
@@ -1894,15 +1915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
1894
1915
|
type: Component,
|
1895
1916
|
args: [{ selector: 'ai-table-field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
1896
1917
|
class: 'field-menu'
|
1897
|
-
}, imports: [
|
1898
|
-
ThyIcon,
|
1899
|
-
ThyDivider,
|
1900
|
-
ThyDropdownMenuComponent,
|
1901
|
-
ThyDropdownMenuItemDirective,
|
1902
|
-
ThyDropdownMenuItemNameDirective,
|
1903
|
-
ThyDropdownMenuItemIconDirective,
|
1904
|
-
NgClass
|
1905
|
-
], template: "@for (menu of fieldMenus; track index; let index = $index) {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n @if (menu.type === 'divider') {\n <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n @let isRemoveField = menu.type === 'removeField';\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"disabled\"\n >\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</span>\n </a>\n }\n }\n}\n" }]
|
1918
|
+
}, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@for (menu of fieldMenus; track index; let index = $index) {\n @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n @if (menu.type === 'divider') {\n <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n } @else {\n @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n @let isRemoveField = menu.type === 'removeField';\n <a\n thyDropdownMenuItem\n href=\"javascript:;\"\n [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n (click)=\"execute(menu)\"\n [thyDisabled]=\"disabled\"\n >\n <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n <span>{{ menu.name! }}</span>\n </a>\n }\n }\n}\n" }]
|
1906
1919
|
}], propDecorators: { fieldId: [{
|
1907
1920
|
type: Input,
|
1908
1921
|
args: [{ required: true }]
|
@@ -4232,6 +4245,7 @@ class AITableCellLink {
|
|
4232
4245
|
lineHeight: 1.84,
|
4233
4246
|
listening: true,
|
4234
4247
|
ellipsis: true,
|
4248
|
+
textDecoration: 'underline',
|
4235
4249
|
zIndex
|
4236
4250
|
};
|
4237
4251
|
}
|
@@ -5308,10 +5322,16 @@ class CellDrawer extends Drawer {
|
|
5308
5322
|
this.renderSingleSelectCell(render, ctx);
|
5309
5323
|
}
|
5310
5324
|
}
|
5325
|
+
getValidSelectedValue(field, transformValue) {
|
5326
|
+
const fieldOptionsMap = helpers.keyBy(field.settings.options || [], '_id');
|
5327
|
+
return (transformValue || []).filter((optionId) => !!fieldOptionsMap[optionId]);
|
5328
|
+
}
|
5311
5329
|
renderCellMultiSelect(render, ctx) {
|
5312
|
-
const { x, y, field,
|
5313
|
-
|
5330
|
+
const { x, y, field, columnWidth } = render;
|
5331
|
+
let transformValue = this.getValidSelectedValue(field, render.transformValue);
|
5332
|
+
if (!transformValue.length) {
|
5314
5333
|
return;
|
5334
|
+
}
|
5315
5335
|
let currentX = x + AI_TABLE_CELL_PADDING;
|
5316
5336
|
const maxContainerWidth = columnWidth - 2 * AI_TABLE_CELL_PADDING;
|
5317
5337
|
const optionStyle = field.settings.option_style;
|
@@ -5505,9 +5525,9 @@ class CellDrawer extends Drawer {
|
|
5505
5525
|
}
|
5506
5526
|
}
|
5507
5527
|
renderSingleSelectCell(render, ctx) {
|
5508
|
-
const { x, y,
|
5509
|
-
const
|
5510
|
-
if (!
|
5528
|
+
const { x, y, field, columnWidth, isActive } = render;
|
5529
|
+
const transformValue = this.getValidSelectedValue(field, render.transformValue);
|
5530
|
+
if (!transformValue.length) {
|
5511
5531
|
return;
|
5512
5532
|
}
|
5513
5533
|
if (!transformValue[0]) {
|
@@ -7548,5 +7568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
7548
7568
|
* Generated bundle index. Do not edit.
|
7549
7569
|
*/
|
7550
7570
|
|
7551
|
-
export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid,
|
7571
|
+
export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectAllState, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, ViewOperationMap, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isCellMatchKeywords, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, zhIntlCollator };
|
7552
7572
|
//# sourceMappingURL=ai-table-grid.mjs.map
|