ngx-rs-ant 0.7.9 → 0.8.8
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/box-container/box-item/item-config/item-config.component.d.ts +1 -0
- package/esm2020/box-container/PluginManager.mjs +2 -2
- package/esm2020/box-container/box-item/item-config/item-config.component.mjs +14 -4
- package/esm2020/modal/modal.component.mjs +13 -11
- package/esm2020/modal/modal.service.mjs +2 -1
- package/fesm2015/ngx-rs-ant.mjs +29 -16
- package/fesm2015/ngx-rs-ant.mjs.map +1 -1
- package/fesm2020/ngx-rs-ant.mjs +27 -14
- package/fesm2020/ngx-rs-ant.mjs.map +1 -1
- package/modal/modal.component.d.ts +2 -3
- package/package.json +1 -1
package/fesm2020/ngx-rs-ant.mjs
CHANGED
|
@@ -262,7 +262,7 @@ class PluginManager {
|
|
|
262
262
|
if (this.activeItems.indexOf($event.target) < 0) {
|
|
263
263
|
return;
|
|
264
264
|
}
|
|
265
|
-
this.activeItem.next({ boxItem, index, style, config: config.config });
|
|
265
|
+
this.activeItem.next({ boxItem, index, style, config: config.config, componentRef });
|
|
266
266
|
$event.target.classList.add('plugin-active');
|
|
267
267
|
});
|
|
268
268
|
activeComponentRef.instance.itemRemove.subscribe(() => {
|
|
@@ -284,6 +284,8 @@ class ItemConfigComponent {
|
|
|
284
284
|
return;
|
|
285
285
|
}
|
|
286
286
|
this.pageConfigContent.clear();
|
|
287
|
+
const plugin = PluginFactory.get(item.config?.name);
|
|
288
|
+
const pluginType = plugin?.type;
|
|
287
289
|
const pluginConfig = PluginFactory.getConfig(item.config?.name);
|
|
288
290
|
if (!pluginConfig) {
|
|
289
291
|
return;
|
|
@@ -291,9 +293,17 @@ class ItemConfigComponent {
|
|
|
291
293
|
const componentRef = this.pageConfigContent.createComponent(pluginConfig.component);
|
|
292
294
|
const instance = componentRef.instance;
|
|
293
295
|
instance.config = item.config.pluginConfig;
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
296
|
+
if (pluginType === 'form') {
|
|
297
|
+
instance.fieldTree = this.fieldTree;
|
|
298
|
+
}
|
|
299
|
+
instance.configChange.subscribe((reload) => {
|
|
300
|
+
if (reload) {
|
|
301
|
+
const componentRef = PluginManager.createComponent(item.boxItem, item.index, item.style, item.config);
|
|
302
|
+
componentRef.location.nativeElement.click();
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
Object.assign(item.componentRef.instance, item.config.pluginConfig);
|
|
306
|
+
}
|
|
297
307
|
});
|
|
298
308
|
});
|
|
299
309
|
}
|
|
@@ -1160,9 +1170,8 @@ class ModalComponent {
|
|
|
1160
1170
|
}
|
|
1161
1171
|
show() {
|
|
1162
1172
|
// 若存在多层模态框，仅保留最上层遮罩颜色，下层遮罩设置为透明
|
|
1163
|
-
const parentElement = this.elementRef.nativeElement.parentElement;
|
|
1164
1173
|
const nodeName = this.elementRef.nativeElement.nodeName;
|
|
1165
|
-
const modals =
|
|
1174
|
+
const modals = this._parentViewContainerRef.element.nativeElement.querySelectorAll(nodeName);
|
|
1166
1175
|
for (let i = 0; i < modals.length; i++) {
|
|
1167
1176
|
if (i === modals.length - 1) {
|
|
1168
1177
|
modals[i].querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
|
|
@@ -1177,9 +1186,8 @@ class ModalComponent {
|
|
|
1177
1186
|
}
|
|
1178
1187
|
ngOnDestroy() {
|
|
1179
1188
|
// 若存在多层模态框，下一层遮罩设置为不透明
|
|
1180
|
-
const parentElement = this.elementRef.nativeElement.parentElement;
|
|
1181
1189
|
const nodeName = this.elementRef.nativeElement.nodeName;
|
|
1182
|
-
const nextModal =
|
|
1190
|
+
const nextModal = this._parentViewContainerRef.element.nativeElement.querySelector(nodeName + ':nth-last-child(2)');
|
|
1183
1191
|
if (nextModal) {
|
|
1184
1192
|
nextModal.querySelector('.modal-backdrop').style.backgroundColor = 'rgba(37, 43, 58, 0.05)';
|
|
1185
1193
|
}
|
|
@@ -1193,12 +1201,13 @@ class ModalComponent {
|
|
|
1193
1201
|
};
|
|
1194
1202
|
}
|
|
1195
1203
|
resolveModalPosition() {
|
|
1196
|
-
if (this.modalElementRef.nativeElement.offsetHeight
|
|
1204
|
+
if (this.modalElementRef.nativeElement.offsetHeight >= this.elementRef.nativeElement.parentElement.offsetHeight - 48) {
|
|
1197
1205
|
this.modalElementRef.nativeElement.style.height = this.elementRef.nativeElement.parentElement.offsetHeight - 48 + 'px';
|
|
1198
1206
|
}
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
}
|
|
1207
|
+
else {
|
|
1208
|
+
this.modalElementRef.nativeElement.style.height = 'auto';
|
|
1209
|
+
}
|
|
1210
|
+
return {};
|
|
1202
1211
|
}
|
|
1203
1212
|
onMousedown($event) {
|
|
1204
1213
|
if ($event.button === 2 || !this.checkHandleTarget($event.target, this.moveHandleEl)) {
|
|
@@ -1246,14 +1255,17 @@ class ModalComponent {
|
|
|
1246
1255
|
element.style.left = currentLeft + 'px';
|
|
1247
1256
|
}
|
|
1248
1257
|
onWindowResize() {
|
|
1258
|
+
this.modalElementRef.nativeElement.style.top = '24px';
|
|
1259
|
+
this.modalElementRef.nativeElement.style.left =
|
|
1260
|
+
(this.elementRef.nativeElement.parentElement.offsetWidth - this.modalElementRef.nativeElement.offsetWidth) / 2 + 'px';
|
|
1249
1261
|
this.changeDetectorRef.detectChanges();
|
|
1250
1262
|
}
|
|
1251
1263
|
}
|
|
1252
1264
|
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1253
|
-
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext", footerTemplate: "footerTemplate", footerTemplateContext: "footerTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\n <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n <div class=\"modal-title\">{{title}}</div>\n <i class=\"icon-close\" (click)=\"hide()\"></i>\n </div>\n <div class=\"modal-content\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n </div>\n <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\n </div>\n </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;
|
|
1265
|
+
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ModalComponent, selector: "rs-modal", inputs: { title: "title", size: "size", contentTemplate: "contentTemplate", contentTemplateContext: "contentTemplateContext", footerTemplate: "footerTemplate", footerTemplateContext: "footerTemplateContext" }, host: { listeners: { "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)", "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "modalElementRef", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n <div class=\"modal-title\">{{title}}</div>\r\n <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n </div>\r\n <div class=\"modal-content\">\r\n <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n </div>\r\n <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--devui-dividing-line, #f2f2f3)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1254
1266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
1255
1267
|
type: Component,
|
|
1256
|
-
args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\n <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\n <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\n <div class=\"modal-title\">{{title}}</div>\n <i class=\"icon-close\" (click)=\"hide()\"></i>\n </div>\n <div class=\"modal-content\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\n </div>\n <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\n </div>\n </div>\n</div>\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;
|
|
1268
|
+
args: [{ selector: 'rs-modal', template: "<div class=\"modal-backdrop\" [ngStyle]=\"resolveModalBackdropPosition()\">\r\n <div #modal class=\"modal\" [ngStyle]=\"resolveModalPosition()\">\r\n <div class=\"modal-header\" (mousedown)=\"onMousedown($event)\">\r\n <div class=\"modal-title\">{{title}}</div>\r\n <i class=\"icon-close\" (click)=\"hide()\"></i>\r\n </div>\r\n <div class=\"modal-content\">\r\n <ng-template [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: contentTemplateContext}\"></ng-template>\r\n </div>\r\n <div *ngIf=\"footerTemplate\" class=\"modal-footer\">\r\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: footerTemplateContext}\"></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host .modal-backdrop{position:absolute;inset:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1)}:host .modal-backdrop .modal{position:absolute;z-index:var(--devui-z-index-modal, 1050);background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px);box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 10px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .24));display:flex;flex-flow:column nowrap}:host .modal-backdrop .modal .modal-header{flex:0 0 36px;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}:host .modal-backdrop .modal .modal-header .modal-title{padding:12px 24px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700}:host .modal-backdrop .modal .modal-header i{position:absolute;top:12px;right:12px;padding:4px;font-size:var(--devui-font-size-card-title, 14px)}:host .modal-backdrop .modal .modal-header i:hover{cursor:pointer;color:var(--devui-danger, #f66f6a);background-color:var(--devui-info-bg, #e9edfa)}:host .modal-backdrop .modal .modal-content{flex:1;overflow:auto;display:flex;flex-flow:column nowrap;font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f)}:host .modal-backdrop .modal .modal-footer{flex:none;padding-top:12px;border-top:1px solid var(--devui-dividing-line, #f2f2f3)}\n"] }]
|
|
1257
1269
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
1258
1270
|
type: Input
|
|
1259
1271
|
}], size: [{
|
|
@@ -1310,6 +1322,7 @@ class ModalService {
|
|
|
1310
1322
|
};
|
|
1311
1323
|
modalRef.instance.title = title;
|
|
1312
1324
|
modalRef.instance.size = size;
|
|
1325
|
+
modalRef.instance._parentViewContainerRef = viewContainerRef;
|
|
1313
1326
|
modalRef.instance.contentTemplate = contentTemplate;
|
|
1314
1327
|
modalRef.instance.contentTemplateContext = contentTemplateContext;
|
|
1315
1328
|
modalRef.instance.footerTemplate = footerTemplate;
|