@masterteam/form-builder 0.0.39 → 0.0.41
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/README.md
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
# @masterteam/form-builder
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
# @masterteam/form-builder
|
|
2
|
+
|
|
3
|
+
## Formula Conditions
|
|
4
|
+
|
|
5
|
+
Field condition formulas render field display names in the toolbar and visual
|
|
6
|
+
editor, while serialized formula tokens keep backend property keys in
|
|
7
|
+
`FormulaToken.value`. When restoring backend-saved key-only tokens, hydrate
|
|
8
|
+
`FormulaToken.display` from the available form fields before showing the editor.
|
|
9
|
+
|
|
10
|
+
## 🤝 Contributing
|
|
11
|
+
|
|
12
|
+
Contributions are welcome\! Please feel free to open an issue or submit a pull request.
|
|
13
|
+
|
|
14
|
+
## 📄 License
|
|
15
|
+
|
|
16
|
+
This project is licensed under the MIT License.
|
|
@@ -1221,8 +1221,12 @@ class FBFieldConditions {
|
|
|
1221
1221
|
// Condition-specific functions and operators
|
|
1222
1222
|
functionCategories = CONDITION_FUNCTION_CATEGORIES;
|
|
1223
1223
|
operators = CONDITION_OPERATORS;
|
|
1224
|
-
/**
|
|
1225
|
-
|
|
1224
|
+
/** Property display items for toolbar; keys remain the persisted formula value. */
|
|
1225
|
+
propertyItems = computed(() => this.availableFields().map((field) => ({
|
|
1226
|
+
key: field.key,
|
|
1227
|
+
name: field.name,
|
|
1228
|
+
description: field.type ? `${field.name} (${field.type})` : field.name,
|
|
1229
|
+
})), ...(ngDevMode ? [{ debugName: "propertyItems" }] : /* istanbul ignore next */ []));
|
|
1226
1230
|
/** Toolbar labels */
|
|
1227
1231
|
toolbarLabels = computed(() => {
|
|
1228
1232
|
const _lang = this.activeLang();
|
|
@@ -1246,7 +1250,7 @@ class FBFieldConditions {
|
|
|
1246
1250
|
if (formula) {
|
|
1247
1251
|
try {
|
|
1248
1252
|
const tokens = JSON.parse(formula);
|
|
1249
|
-
this.formulaControl.patchValue(tokens);
|
|
1253
|
+
this.formulaControl.patchValue(this.withPropertyDisplayNames(tokens));
|
|
1250
1254
|
}
|
|
1251
1255
|
catch {
|
|
1252
1256
|
// Invalid JSON, start with empty
|
|
@@ -1268,8 +1272,29 @@ class FBFieldConditions {
|
|
|
1268
1272
|
onCancel() {
|
|
1269
1273
|
this.ref.close({ saved: false });
|
|
1270
1274
|
}
|
|
1275
|
+
withPropertyDisplayNames(tokens) {
|
|
1276
|
+
const namesByKey = new Map(this.availableFields().map((field) => [field.key, field.name]));
|
|
1277
|
+
if (namesByKey.size === 0) {
|
|
1278
|
+
return tokens;
|
|
1279
|
+
}
|
|
1280
|
+
return tokens.map((token) => {
|
|
1281
|
+
if (token.type !== 'property') {
|
|
1282
|
+
return token;
|
|
1283
|
+
}
|
|
1284
|
+
const key = this.extractPropertyKey(token.value);
|
|
1285
|
+
const display = key ? namesByKey.get(key) : undefined;
|
|
1286
|
+
return display ? { ...token, display } : token;
|
|
1287
|
+
});
|
|
1288
|
+
}
|
|
1289
|
+
extractPropertyKey(value) {
|
|
1290
|
+
const pathSeparatorIndex = value.lastIndexOf('::');
|
|
1291
|
+
const raw = pathSeparatorIndex >= 0
|
|
1292
|
+
? value.slice(pathSeparatorIndex + 2)
|
|
1293
|
+
: value.replace(/^[@*$]+\./, '').replace(/^@/, '');
|
|
1294
|
+
return raw.trim();
|
|
1295
|
+
}
|
|
1271
1296
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldConditions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1272
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n [class]=\"[\n modalService.contentClass,\n 'min-w-0',\n 'p-4',\n 'overflow-y-hidden!',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"mt-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"
|
|
1297
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n [class]=\"[\n modalService.contentClass,\n 'min-w-0',\n 'p-4',\n 'overflow-y-hidden!',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"mt-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"propertyItems()\"\n [functionCategories]=\"functionCategories\"\n [operators]=\"operators\"\n [labels]=\"toolbarLabels()\"\n (onBlockInsert)=\"onBlockInsert($event)\"\n />\n <!-- Formula Editor -->\n <mt-formula-editor\n #editor\n [placeholder]=\"t('build-condition-formula')\"\n [formControl]=\"formulaControl\"\n />\n </div>\n </div>\n\n <div\n [class]=\"[\n modalService.footerClass,\n '!h-auto',\n 'min-h-0',\n 'flex-col',\n 'gap-2',\n 'sm:flex-row',\n 'sm:items-center',\n 'sm:justify-end',\n ]\"\n >\n <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "visibleTabs", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
|
|
1273
1298
|
}
|
|
1274
1299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldConditions, decorators: [{
|
|
1275
1300
|
type: Component,
|
|
@@ -1279,7 +1304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
1279
1304
|
Button,
|
|
1280
1305
|
FormulaToolbar,
|
|
1281
1306
|
FormulaEditor,
|
|
1282
|
-
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n [class]=\"[\n modalService.contentClass,\n 'min-w-0',\n 'p-4',\n 'overflow-y-hidden!',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"mt-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"
|
|
1307
|
+
], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n <div\n [class]=\"[\n modalService.contentClass,\n 'min-w-0',\n 'p-4',\n 'overflow-y-hidden!',\n 'max-[640px]:p-3',\n ]\"\n >\n <div class=\"mt-4 flex h-full min-h-0 flex-col gap-3 overflow-y-auto pb-10\">\n <!-- Formula Toolbar -->\n <mt-formula-toolbar\n [knownProperties]=\"propertyItems()\"\n [functionCategories]=\"functionCategories\"\n [operators]=\"operators\"\n [labels]=\"toolbarLabels()\"\n (onBlockInsert)=\"onBlockInsert($event)\"\n />\n <!-- Formula Editor -->\n <mt-formula-editor\n #editor\n [placeholder]=\"t('build-condition-formula')\"\n [formControl]=\"formulaControl\"\n />\n </div>\n </div>\n\n <div\n [class]=\"[\n modalService.footerClass,\n '!h-auto',\n 'min-h-0',\n 'flex-col',\n 'gap-2',\n 'sm:flex-row',\n 'sm:items-center',\n 'sm:justify-end',\n ]\"\n >\n <mt-button\n [label]=\"t('cancel')\"\n variant=\"outlined\"\n [disabled]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onCancel()\"\n />\n <mt-button\n [label]=\"t('save')\"\n severity=\"primary\"\n [loading]=\"submitting()\"\n styleClass=\"w-full sm:w-auto\"\n (onClick)=\"onSave()\"\n />\n </div>\n</ng-container>\n" }]
|
|
1283
1308
|
}], ctorParameters: () => [], propDecorators: { initialFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFormula", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], editorRef: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
|
|
1284
1309
|
|
|
1285
1310
|
class FBFieldForm {
|