ngx-rs-ant 0.10.8 → 0.10.9
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/esm2020/box-container/PluginManager.mjs +30 -1
- package/esm2020/box-container/box-item/box-item.component.mjs +4 -4
- package/esm2020/box-container/plugin-active/plugin-active.component.mjs +4 -4
- package/fesm2015/ngx-rs-ant.mjs +35 -6
- package/fesm2015/ngx-rs-ant.mjs.map +1 -1
- package/fesm2020/ngx-rs-ant.mjs +35 -6
- package/fesm2020/ngx-rs-ant.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/ngx-rs-ant.mjs
CHANGED
|
@@ -138,14 +138,14 @@ class PluginActiveComponent {
|
|
|
138
138
|
this.itemRemove.emit();
|
|
139
139
|
}
|
|
140
140
|
splitItem(direction) {
|
|
141
|
-
//
|
|
141
|
+
// 上层实例化时重写
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
PluginActiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\"\r\n dDraggable\r\n [disabled]=\"!showClose || showDivider\"\r\n [dragData]=\"dragData\"\r\n dragScope=\"plugin-item\"\r\n>\r\n <div class=\"active-bar\">\r\n <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n <span>{{name}}</span>\r\n <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n </div>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i
|
|
145
|
+
PluginActiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: PluginActiveComponent, selector: "rs-plugin-active", host: { properties: { "style": "this._style" } }, ngImport: i0, template: "<div class=\"active-item\"\r\n dDraggable\r\n [disabled]=\"!showClose || showDivider\"\r\n [dragData]=\"dragData\"\r\n dragScope=\"plugin-item\"\r\n>\r\n <div class=\"active-bar\">\r\n <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n <span>{{name}}</span>\r\n <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n </div>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--devui-danger, #f66f6a)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DraggableDirective, selector: "[dDraggable]", inputs: ["dragData", "dragHandle", "dragEffect", "dragScope", "dragHandleClass", "dragOverClass", "disabled", "enableDragFollow", "dragFollowOptions", "originPlaceholder", "dragIdentity", "dragItemParentName", "dragItemChildrenName"], outputs: ["dragStartEvent", "dragEvent", "dragEndEvent", "dropEndEvent"] }, { kind: "component", type: DividerComponent, selector: "rs-divider", inputs: ["direction", "targetElement"], outputs: ["dividerClick"] }] });
|
|
146
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: PluginActiveComponent, decorators: [{
|
|
147
147
|
type: Component,
|
|
148
|
-
args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\"\r\n dDraggable\r\n [disabled]=\"!showClose || showDivider\"\r\n [dragData]=\"dragData\"\r\n dragScope=\"plugin-item\"\r\n>\r\n <div class=\"active-bar\">\r\n <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n <span>{{name}}</span>\r\n <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n </div>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i
|
|
148
|
+
args: [{ selector: 'rs-plugin-active', template: "<div class=\"active-item\"\r\n dDraggable\r\n [disabled]=\"!showClose || showDivider\"\r\n [dragData]=\"dragData\"\r\n dragScope=\"plugin-item\"\r\n>\r\n <div class=\"active-bar\">\r\n <i *ngIf=\"showClose && !showDivider\" class=\"icon-drag\"></i>\r\n <span>{{name}}</span>\r\n <i class=\"coast-icon-add-row\" title=\"\u6DFB\u52A0\u884C\" (click)=\"splitItem('column')\"></i>\r\n <i class=\"coast-icon-add-column\" title=\"\u6DFB\u52A0\u5217\" (click)=\"splitItem('row')\"></i>\r\n <i *ngIf=\"showClose\" class=\"icon-close\" (click)=\"onItemCloseIconClick($event)\"></i>\r\n </div>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"row\"\r\n (dividerClick)=\"splitItem('column')\"></rs-divider>\r\n <rs-divider *ngIf=\"showDivider\" [targetElement]=\"targetElement\" direction=\"column\"\r\n (dividerClick)=\"splitItem('row')\"></rs-divider>\r\n</div>\r\n", styles: [":host{display:none;position:absolute;border:1px solid var(--devui-brand, #5e7ce0);pointer-events:none}:host .active-item{width:100%;height:100%}:host .active-item .active-bar{padding:2px 4px;color:#fff;background-color:var(--devui-brand, #5e7ce0);position:absolute;top:-23px;right:-1px;display:flex;flex-flow:row nowrap;align-items:center;pointer-events:all;white-space:nowrap}:host .active-item .active-bar i{flex:none;cursor:pointer}:host .active-item .active-bar i:not(:last-child){margin-right:8px}:host .active-item .active-bar i.icon-drag{cursor:move}:host .active-item .active-bar i.icon-close:hover{color:var(--devui-danger, #f66f6a)}:host .active-item .active-bar span{flex:1;margin-right:8px}.plugin-active>:host{display:block}\n"] }]
|
|
149
149
|
}], propDecorators: { _style: [{
|
|
150
150
|
type: HostBinding,
|
|
151
151
|
args: ['style']
|
|
@@ -210,6 +210,7 @@ class PluginManager {
|
|
|
210
210
|
boxItem.config.list.splice(index, 1, { type: 'blank', style: boxItem.config.list[index].style });
|
|
211
211
|
boxItem.load();
|
|
212
212
|
};
|
|
213
|
+
componentRef.location.nativeElement.style.margin = '16px';
|
|
213
214
|
componentRef.location.nativeElement.style.pointerEvents = 'all';
|
|
214
215
|
for (let child of componentRef.location.nativeElement.children) {
|
|
215
216
|
child.style.pointerEvents = 'none';
|
|
@@ -267,6 +268,34 @@ class PluginManager {
|
|
|
267
268
|
this.activeItem.next({ boxItem, index, style, config: config.config, componentRef });
|
|
268
269
|
$event.target.classList.add('plugin-active');
|
|
269
270
|
});
|
|
271
|
+
activeComponentRef.instance.splitItem = (direction) => {
|
|
272
|
+
if (boxItem.config.direction === direction) {
|
|
273
|
+
boxItem.config.list.splice(index + 1, 0, { type: 'blank', style: {} });
|
|
274
|
+
boxItem.load();
|
|
275
|
+
}
|
|
276
|
+
else {
|
|
277
|
+
if (boxItem.config.list.length === 1) {
|
|
278
|
+
boxItem.config.direction = direction;
|
|
279
|
+
boxItem.config.list.push({ type: 'blank', style: {} });
|
|
280
|
+
}
|
|
281
|
+
else {
|
|
282
|
+
if (boxItem.config.list[index].type === 'item' && boxItem.config.list[index].config.direction === direction) {
|
|
283
|
+
boxItem.config.list[index].config.list.push({ type: 'blank', style: {} });
|
|
284
|
+
}
|
|
285
|
+
else {
|
|
286
|
+
boxItem.config.list.splice(index, 1, {
|
|
287
|
+
type: 'item',
|
|
288
|
+
style: boxItem.config.list[index].style,
|
|
289
|
+
config: {
|
|
290
|
+
direction,
|
|
291
|
+
list: [boxItem.config.list[index], { type: 'blank', style: {} }]
|
|
292
|
+
}
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
boxItem.load();
|
|
297
|
+
}
|
|
298
|
+
};
|
|
270
299
|
activeComponentRef.instance.itemRemove.subscribe(() => {
|
|
271
300
|
this.activeItem.next('');
|
|
272
301
|
viewContainerRef.clear();
|
|
@@ -540,7 +569,7 @@ class BoxItemComponent {
|
|
|
540
569
|
activeComponentRef.instance.showDivider = true;
|
|
541
570
|
activeComponentRef.instance.splitItem = (direction) => {
|
|
542
571
|
if (this.config.direction === direction) {
|
|
543
|
-
this.config.list.splice(index, 0, { type: 'blank', style: {} });
|
|
572
|
+
this.config.list.splice(index + 1, 0, { type: 'blank', style: {} });
|
|
544
573
|
this.load();
|
|
545
574
|
}
|
|
546
575
|
else {
|
|
@@ -551,10 +580,10 @@ class BoxItemComponent {
|
|
|
551
580
|
else {
|
|
552
581
|
this.config.list.splice(index, 1, {
|
|
553
582
|
type: 'item',
|
|
554
|
-
style:
|
|
583
|
+
style: {},
|
|
555
584
|
config: {
|
|
556
585
|
direction,
|
|
557
|
-
list: [
|
|
586
|
+
list: [this.config.list[index], { type: 'blank', style: {} }]
|
|
558
587
|
}
|
|
559
588
|
});
|
|
560
589
|
}
|