ngx-tethys 19.1.0-next.5 → 19.1.0-next.6
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/CHANGELOG.md +15 -0
- package/date-picker/abstract-picker.component.d.ts +50 -52
- package/date-picker/abstract-picker.directive.d.ts +15 -40
- package/date-picker/base-picker.component.d.ts +11 -40
- package/date-picker/date-picker.config.d.ts +1 -0
- package/date-picker/lib/calendar/calendar-footer.component.d.ts +24 -19
- package/date-picker/lib/calendar/calendar-header.component.d.ts +15 -15
- package/date-picker/lib/calendar/calendar-table.component.d.ts +15 -16
- package/date-picker/lib/date/date-table-cell.component.d.ts +2 -3
- package/date-picker/lib/date/date-table.component.d.ts +2 -3
- package/date-picker/lib/date-carousel/date-carousel.component.d.ts +2 -3
- package/date-picker/lib/decade/decade-header.component.d.ts +2 -5
- package/date-picker/lib/decade/decade-table.component.d.ts +3 -5
- package/date-picker/lib/month/month-table.component.d.ts +1 -2
- package/date-picker/lib/popups/date-popup.component.d.ts +33 -34
- package/date-picker/lib/popups/inner-popup.component.d.ts +22 -29
- package/date-picker/lib/quarter/quarter-table.component.d.ts +1 -4
- package/date-picker/lib/year/year-header.component.d.ts +2 -4
- package/date-picker/lib/year/year-table.component.d.ts +2 -4
- package/date-picker/month-picker.component.d.ts +2 -2
- package/date-picker/picker.component.d.ts +30 -34
- package/date-picker/picker.pipes.d.ts +4 -5
- package/date-picker/picker.util.d.ts +5 -5
- package/date-picker/picker.validators.d.ts +4 -8
- package/date-picker/quarter-picker.component.d.ts +2 -3
- package/date-picker/week-picker.component.d.ts +0 -1
- package/date-picker/year-picker.component.d.ts +2 -3
- package/dropdown/dropdown.directive.d.ts +2 -1
- package/fesm2022/ngx-tethys-autocomplete.mjs +4 -4
- package/fesm2022/ngx-tethys-autocomplete.mjs.map +1 -1
- package/fesm2022/ngx-tethys-checkbox.mjs +2 -2
- package/fesm2022/ngx-tethys-checkbox.mjs.map +1 -1
- package/fesm2022/ngx-tethys-date-picker.mjs +833 -1060
- package/fesm2022/ngx-tethys-date-picker.mjs.map +1 -1
- package/fesm2022/ngx-tethys-dropdown.mjs +2 -1
- package/fesm2022/ngx-tethys-dropdown.mjs.map +1 -1
- package/fesm2022/ngx-tethys-i18n.mjs +11 -6
- package/fesm2022/ngx-tethys-i18n.mjs.map +1 -1
- package/fesm2022/ngx-tethys-layout.mjs +291 -334
- package/fesm2022/ngx-tethys-layout.mjs.map +1 -1
- package/fesm2022/ngx-tethys-list.mjs +11 -10
- package/fesm2022/ngx-tethys-list.mjs.map +1 -1
- package/fesm2022/ngx-tethys-radio.mjs +4 -4
- package/fesm2022/ngx-tethys-radio.mjs.map +1 -1
- package/fesm2022/ngx-tethys-select.mjs +164 -228
- package/fesm2022/ngx-tethys-select.mjs.map +1 -1
- package/fesm2022/ngx-tethys-shared.mjs +371 -523
- package/fesm2022/ngx-tethys-shared.mjs.map +1 -1
- package/fesm2022/ngx-tethys-tree-select.mjs +215 -281
- package/fesm2022/ngx-tethys-tree-select.mjs.map +1 -1
- package/fesm2022/ngx-tethys.mjs +1 -1
- package/fesm2022/ngx-tethys.mjs.map +1 -1
- package/i18n/i18n.d.ts +2 -1
- package/i18n/locales/de-de.d.ts +2 -1
- package/i18n/locales/en-us.d.ts +2 -1
- package/i18n/locales/ja-jp.d.ts +2 -1
- package/i18n/locales/zh-hans.d.ts +2 -1
- package/i18n/locales/zh-hant.d.ts +2 -1
- package/layout/header.component.d.ts +15 -19
- package/layout/layout.component.d.ts +3 -2
- package/layout/sidebar-header.component.d.ts +7 -8
- package/layout/sidebar.component.d.ts +32 -62
- package/package.json +54 -54
- package/schematics/version.d.ts +1 -1
- package/schematics/version.js +1 -1
- package/select/custom-select/custom-select.component.d.ts +33 -56
- package/select/native-select/native-select.component.d.ts +7 -13
- package/shared/base-form-check.component.d.ts +6 -8
- package/shared/directives/string-or-template-outlet.directive.d.ts +5 -6
- package/shared/directives/thy-autofocus.directive.d.ts +4 -6
- package/shared/directives/thy-scroll.directive.d.ts +5 -8
- package/shared/directives/thy-show.d.ts +3 -4
- package/shared/directives/thy-stop-propagation.directive.d.ts +4 -4
- package/shared/directives/view-outlet.directive.d.ts +6 -7
- package/shared/ng-transclude.directive.d.ts +2 -3
- package/shared/option/group/option-group.component.d.ts +5 -9
- package/shared/option/list-option/list-option.component.d.ts +4 -8
- package/shared/option/option.component.d.ts +10 -17
- package/shared/option/options-container.component.d.ts +1 -1
- package/shared/select/select-control/select-control.component.d.ts +27 -47
- package/tree-select/tree-select.component.d.ts +53 -70
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ViewportRuler, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
2
2
|
import { isPlatformBrowser, NgTemplateOutlet, NgClass, NgStyle, CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID,
|
|
4
|
+
import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID, DestroyRef, signal, computed, contentChild, viewChild, input, output, effect, forwardRef, Input, Component, NgModule } from '@angular/core';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
|
|
7
7
|
import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
|
|
@@ -9,11 +9,12 @@ import { ThyListModule } from 'ngx-tethys/list';
|
|
|
9
9
|
import { ThySelectControl, ThyStopPropagationDirective, ThySelectCommonModule, ThySharedModule } from 'ngx-tethys/shared';
|
|
10
10
|
import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, EXPANDED_DROPDOWN_POSITIONS, scaleYMotion, injectPanelEmptyIcon } from 'ngx-tethys/core';
|
|
11
11
|
import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
12
|
+
import { isObject, coerceBooleanProperty, elementMatchClosest, isArray, produce } from 'ngx-tethys/util';
|
|
13
|
+
import { of } from 'rxjs';
|
|
14
|
+
import { take } from 'rxjs/operators';
|
|
15
15
|
import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
|
|
16
16
|
import { injectLocale } from 'ngx-tethys/i18n';
|
|
17
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
17
18
|
|
|
18
19
|
function filterTreeData(treeNodes, searchText, searchKey = 'name') {
|
|
19
20
|
const filterNodes = (node, result) => {
|
|
@@ -39,53 +40,13 @@ function filterTreeData(treeNodes, searchText, searchKey = 'name') {
|
|
|
39
40
|
* @order 10
|
|
40
41
|
*/
|
|
41
42
|
class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
42
|
-
/**
|
|
43
|
-
* treeNodes 数据
|
|
44
|
-
* @type ThyTreeSelectNode[]
|
|
45
|
-
*/
|
|
46
|
-
set thyTreeNodes(value) {
|
|
47
|
-
this.treeNodes = value;
|
|
48
|
-
this.originTreeNodes = value;
|
|
49
|
-
if (this.initialled) {
|
|
50
|
-
this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
|
|
51
|
-
this.setSelectedNodes();
|
|
52
|
-
if (this.thyVirtualScroll) {
|
|
53
|
-
this.buildFlattenTreeNodes();
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
43
|
get thyDisabled() {
|
|
58
|
-
return this.thyDisable;
|
|
59
|
-
}
|
|
60
|
-
get placeholder() {
|
|
61
|
-
return this.thyPlaceholder;
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* 图标类型,支持 default | especial,已废弃
|
|
65
|
-
* @deprecated
|
|
66
|
-
*/
|
|
67
|
-
set thyIconType(type) {
|
|
68
|
-
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
69
|
-
warnDeprecation('This parameter has been deprecation');
|
|
70
|
-
}
|
|
71
|
-
// if (type === 'especial') {
|
|
72
|
-
// this.icons = { expand: 'minus-square', collapse: 'plus-square', gap: 20 };
|
|
73
|
-
// } else {
|
|
74
|
-
// this.icons = { expand: 'caret-right-down', collapse: 'caret-right', gap: 15 };
|
|
75
|
-
// }
|
|
76
|
-
}
|
|
77
|
-
_getNgModelType() {
|
|
78
|
-
if (this.thyMultiple) {
|
|
79
|
-
this.valueIsObject = !this.selectedValue[0] || isObject(this.selectedValue[0]);
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
this.valueIsObject = isObject(this.selectedValue);
|
|
83
|
-
}
|
|
44
|
+
return this.thyDisable();
|
|
84
45
|
}
|
|
85
46
|
buildFlattenTreeNodes() {
|
|
86
|
-
this.virtualTreeNodes
|
|
47
|
+
this.virtualTreeNodes.set(this.getFlattenTreeNodes(this.treeNodes()));
|
|
87
48
|
}
|
|
88
|
-
getFlattenTreeNodes(rootTrees = this.treeNodes) {
|
|
49
|
+
getFlattenTreeNodes(rootTrees = this.treeNodes()) {
|
|
89
50
|
const forEachTree = (tree, fn, result = []) => {
|
|
90
51
|
tree.forEach(item => {
|
|
91
52
|
result.push(item);
|
|
@@ -98,11 +59,7 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
98
59
|
return forEachTree(rootTrees, (node) => !!node.expand);
|
|
99
60
|
}
|
|
100
61
|
writeValue(value) {
|
|
101
|
-
this.selectedValue
|
|
102
|
-
if (value) {
|
|
103
|
-
this._getNgModelType();
|
|
104
|
-
}
|
|
105
|
-
this.setSelectedNodes();
|
|
62
|
+
this.selectedValue.set(value);
|
|
106
63
|
}
|
|
107
64
|
constructor() {
|
|
108
65
|
super();
|
|
@@ -112,85 +69,120 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
112
69
|
this.platformId = inject(PLATFORM_ID);
|
|
113
70
|
this.thyClickDispatcher = inject(ThyClickDispatcher);
|
|
114
71
|
this.viewportRuler = inject(ViewportRuler);
|
|
115
|
-
this.
|
|
116
|
-
this.isTreeSelect = true;
|
|
72
|
+
this.destroyRef = inject(DestroyRef);
|
|
117
73
|
// 菜单是否展开
|
|
118
|
-
this.expandTreeSelectOptions = false;
|
|
119
|
-
this.
|
|
120
|
-
this.
|
|
121
|
-
this.
|
|
122
|
-
this.
|
|
123
|
-
this.
|
|
74
|
+
this.expandTreeSelectOptions = signal(false);
|
|
75
|
+
this.selectedValue = signal(undefined);
|
|
76
|
+
this.selectedNode = signal(null);
|
|
77
|
+
this.selectedNodes = signal([]);
|
|
78
|
+
this.flattenTreeNodes = signal([]);
|
|
79
|
+
this.virtualTreeNodes = signal([]);
|
|
80
|
+
this.cdkConnectOverlayWidth = signal(0);
|
|
124
81
|
this.expandedDropdownPositions = EXPANDED_DROPDOWN_POSITIONS;
|
|
125
82
|
this.icons = {
|
|
126
83
|
expand: 'angle-down',
|
|
127
84
|
collapse: 'angle-right',
|
|
128
85
|
gap: 15
|
|
129
86
|
};
|
|
130
|
-
this.initialled = false;
|
|
131
|
-
this.destroy$ = new Subject();
|
|
132
87
|
this.locale = injectLocale('treeSelect');
|
|
133
|
-
this.valueIsObject =
|
|
88
|
+
this.valueIsObject = computed(() => {
|
|
89
|
+
const selectedValue = this.selectedValue();
|
|
90
|
+
if (this.thyMultiple()) {
|
|
91
|
+
return selectedValue && (!selectedValue[0] || isObject(selectedValue[0]));
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
return isObject(selectedValue);
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
this.searchText = signal('');
|
|
98
|
+
this.thyTreeSelectTriggerDisplayRef = contentChild('thyTreeSelectTriggerDisplay');
|
|
99
|
+
this.treeNodeTemplateRef = contentChild('treeNodeTemplate');
|
|
100
|
+
this.cdkOverlayOrigin = viewChild(CdkOverlayOrigin);
|
|
101
|
+
this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
|
|
102
|
+
this.customDisplayTemplate = viewChild('customDisplayTemplate');
|
|
103
|
+
/**
|
|
104
|
+
* treeNodes 数据
|
|
105
|
+
* @type ThyTreeSelectNode[]
|
|
106
|
+
*/
|
|
107
|
+
this.thyTreeNodes = input([]);
|
|
108
|
+
this.treeNodes = computed(() => {
|
|
109
|
+
return filterTreeData(this.thyTreeNodes(), this.searchText(), this.thyShowKey());
|
|
110
|
+
});
|
|
134
111
|
/**
|
|
135
112
|
* 开启虚拟滚动
|
|
136
113
|
*/
|
|
137
|
-
this.thyVirtualScroll = false;
|
|
114
|
+
this.thyVirtualScroll = input(false, { transform: coerceBooleanProperty });
|
|
138
115
|
/**
|
|
139
116
|
* 树节点的唯一标识
|
|
140
117
|
* @type string
|
|
141
118
|
*/
|
|
142
|
-
this.thyPrimaryKey = '_id';
|
|
119
|
+
this.thyPrimaryKey = input('_id');
|
|
143
120
|
/**
|
|
144
121
|
* 树节点的显示的字段 key
|
|
145
122
|
* @type string
|
|
146
123
|
*/
|
|
147
|
-
this.thyShowKey = 'name';
|
|
148
|
-
this.thyChildCountKey = 'childCount';
|
|
124
|
+
this.thyShowKey = input('name');
|
|
125
|
+
this.thyChildCountKey = input('childCount');
|
|
126
|
+
/**
|
|
127
|
+
* 单选时,是否显示清除按钮,当为 true 时,显示清除按钮
|
|
128
|
+
* @default false
|
|
129
|
+
*/
|
|
130
|
+
this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
|
|
149
131
|
/**
|
|
150
132
|
* 是否多选
|
|
151
133
|
* @type boolean
|
|
152
134
|
*/
|
|
153
|
-
this.thyMultiple = false;
|
|
135
|
+
this.thyMultiple = input(false, { transform: coerceBooleanProperty });
|
|
154
136
|
/**
|
|
155
137
|
* 是否禁用树选择器,当为 true 禁用树选择器
|
|
156
138
|
* @type boolean
|
|
157
139
|
*/
|
|
158
|
-
this.thyDisable = false;
|
|
140
|
+
this.thyDisable = input(false, { transform: coerceBooleanProperty });
|
|
159
141
|
/**
|
|
160
142
|
* 树选择框默认文字
|
|
161
143
|
* @type string
|
|
162
144
|
*/
|
|
163
|
-
this.thyPlaceholder = this.locale().placeholder;
|
|
145
|
+
this.thyPlaceholder = input(this.locale().placeholder);
|
|
146
|
+
/**
|
|
147
|
+
* 控制树选择的输入框大小
|
|
148
|
+
* @type xs | sm | md | default | lg
|
|
149
|
+
*/
|
|
150
|
+
this.thySize = input(undefined);
|
|
164
151
|
/**
|
|
165
152
|
* 改变空选项的情况下的提示文本
|
|
166
153
|
* @type string
|
|
167
154
|
*/
|
|
168
|
-
this.thyEmptyOptionsText = this.locale().empty;
|
|
155
|
+
this.thyEmptyOptionsText = input(this.locale().empty);
|
|
169
156
|
/**
|
|
170
157
|
* 设置是否隐藏节点(不可进行任何操作),优先级高于 thyHiddenNodeFn
|
|
171
158
|
* @type string
|
|
172
159
|
*/
|
|
173
|
-
this.thyHiddenNodeKey = 'hidden';
|
|
160
|
+
this.thyHiddenNodeKey = input('hidden');
|
|
174
161
|
/**
|
|
175
162
|
* 设置是否禁用节点(不可进行任何操作),优先级高于 thyDisableNodeFn
|
|
176
163
|
* @type string
|
|
177
164
|
*/
|
|
178
|
-
this.thyDisableNodeKey = 'disabled';
|
|
165
|
+
this.thyDisableNodeKey = input('disabled');
|
|
179
166
|
/**
|
|
180
167
|
* 是否异步加载节点的子节点(显示加载状态),当为 true 时,异步获取
|
|
181
168
|
* @type boolean
|
|
182
169
|
*/
|
|
183
|
-
this.thyAsyncNode = false;
|
|
170
|
+
this.thyAsyncNode = input(false, { transform: coerceBooleanProperty });
|
|
184
171
|
/**
|
|
185
172
|
* 是否展示全名
|
|
186
173
|
* @type boolean
|
|
187
174
|
*/
|
|
188
|
-
this.thyShowWholeName = false;
|
|
175
|
+
this.thyShowWholeName = input(false, { transform: coerceBooleanProperty });
|
|
189
176
|
/**
|
|
190
177
|
* 是否展示搜索
|
|
191
178
|
* @type boolean
|
|
192
179
|
*/
|
|
193
|
-
this.thyShowSearch = false;
|
|
180
|
+
this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
|
|
181
|
+
/**
|
|
182
|
+
* 图标类型,支持 default | especial,已废弃
|
|
183
|
+
* @deprecated
|
|
184
|
+
*/
|
|
185
|
+
this.thyIconType = input(undefined);
|
|
194
186
|
/**
|
|
195
187
|
* 设置是否隐藏节点(不可进行任何操作),优先级低于 thyHiddenNodeKey。
|
|
196
188
|
* @default (node: ThyTreeSelectNode) => boolean = (node: ThyTreeSelectNode) => node.hidden
|
|
@@ -210,34 +202,44 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
210
202
|
* 树选择组件展开和折叠状态事件
|
|
211
203
|
*/
|
|
212
204
|
this.thyExpandStatusChange = output();
|
|
205
|
+
this.selectedValueObject = computed(() => {
|
|
206
|
+
return this.thyMultiple() ? this.selectedNodes() : this.selectedNode();
|
|
207
|
+
});
|
|
208
|
+
this.bindClickEvent();
|
|
209
|
+
this.bindResizeEvent();
|
|
210
|
+
effect(() => {
|
|
211
|
+
this.setSelectedNodes();
|
|
212
|
+
});
|
|
213
|
+
effect(() => {
|
|
214
|
+
if (this.thyVirtualScroll()) {
|
|
215
|
+
this.buildFlattenTreeNodes();
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
effect(() => {
|
|
219
|
+
this.flattenTreeNodes.set(this.flattenNodes(this.treeNodes(), []));
|
|
220
|
+
});
|
|
213
221
|
}
|
|
214
|
-
|
|
215
|
-
this.isMulti = this.thyMultiple;
|
|
216
|
-
this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
|
|
217
|
-
this.setSelectedNodes();
|
|
218
|
-
this.initialled = true;
|
|
219
|
-
if (this.thyVirtualScroll) {
|
|
220
|
-
this.buildFlattenTreeNodes();
|
|
221
|
-
}
|
|
222
|
+
bindClickEvent() {
|
|
222
223
|
if (isPlatformBrowser(this.platformId)) {
|
|
223
224
|
this.thyClickDispatcher
|
|
224
225
|
.clicked(0)
|
|
225
|
-
.pipe(
|
|
226
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
226
227
|
.subscribe(event => {
|
|
227
228
|
event.stopPropagation();
|
|
228
|
-
if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions) {
|
|
229
|
+
if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions()) {
|
|
229
230
|
this.ngZone.run(() => {
|
|
230
231
|
this.close();
|
|
231
|
-
this.ref.markForCheck();
|
|
232
232
|
});
|
|
233
233
|
}
|
|
234
234
|
});
|
|
235
235
|
}
|
|
236
|
+
}
|
|
237
|
+
bindResizeEvent() {
|
|
236
238
|
this.viewportRuler
|
|
237
239
|
.change()
|
|
238
|
-
.pipe(
|
|
240
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
239
241
|
.subscribe(() => {
|
|
240
|
-
this.
|
|
242
|
+
this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
|
|
241
243
|
});
|
|
242
244
|
}
|
|
243
245
|
onFocus($event) {
|
|
@@ -252,109 +254,105 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
252
254
|
}
|
|
253
255
|
this.onTouchedFn();
|
|
254
256
|
}
|
|
255
|
-
ngOnDestroy() {
|
|
256
|
-
this.destroy$.next();
|
|
257
|
-
}
|
|
258
|
-
get selectedValueObject() {
|
|
259
|
-
return this.thyMultiple ? this.selectedNodes : this.selectedNode;
|
|
260
|
-
}
|
|
261
257
|
searchValue(searchText) {
|
|
262
|
-
this.
|
|
258
|
+
this.searchText.set(searchText.trim());
|
|
263
259
|
}
|
|
264
260
|
setPosition() {
|
|
265
261
|
this.ngZone.onStable
|
|
266
262
|
.asObservable()
|
|
267
263
|
.pipe(take(1))
|
|
268
264
|
.subscribe(() => {
|
|
269
|
-
this.cdkConnectedOverlay.overlayRef.updatePosition();
|
|
265
|
+
this.cdkConnectedOverlay().overlayRef.updatePosition();
|
|
270
266
|
});
|
|
271
267
|
}
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
275
|
-
flattenNodes(nodes = [], resultNodes = [], parentPrimaryValue = []) {
|
|
276
|
-
resultNodes = resultNodes.concat(nodes);
|
|
277
|
-
let nodesLeafs = [];
|
|
268
|
+
flattenNodes(nodes = [], parentPrimaryValue = []) {
|
|
269
|
+
let flattenedNodes = [];
|
|
278
270
|
(nodes || []).forEach(item => {
|
|
279
271
|
item.parentValues = parentPrimaryValue;
|
|
280
272
|
item.level = item.parentValues.length;
|
|
273
|
+
flattenedNodes.push(item);
|
|
281
274
|
if (item.children && isArray(item.children)) {
|
|
282
|
-
const
|
|
283
|
-
|
|
275
|
+
const childNodes = this.flattenNodes(item.children, [...parentPrimaryValue, item[this.thyPrimaryKey()]]);
|
|
276
|
+
flattenedNodes = flattenedNodes.concat(childNodes);
|
|
284
277
|
}
|
|
285
278
|
});
|
|
286
|
-
return
|
|
279
|
+
return flattenedNodes;
|
|
287
280
|
}
|
|
288
281
|
_findTreeNode(value) {
|
|
289
|
-
return (this.flattenTreeNodes || []).find(item => item[this.thyPrimaryKey] === value);
|
|
282
|
+
return (this.flattenTreeNodes() || []).find(item => item[this.thyPrimaryKey()] === value);
|
|
290
283
|
}
|
|
291
284
|
setSelectedNodes() {
|
|
292
|
-
|
|
285
|
+
const isMultiple = this.thyMultiple();
|
|
286
|
+
const primaryKey = this.thyPrimaryKey();
|
|
287
|
+
const selectedValue = this.selectedValue();
|
|
288
|
+
const valueIsObject = this.valueIsObject();
|
|
289
|
+
if (selectedValue) {
|
|
293
290
|
// 多选数据初始化
|
|
294
|
-
if (
|
|
295
|
-
if (
|
|
296
|
-
if (
|
|
297
|
-
this.selectedNodes
|
|
298
|
-
return this._findTreeNode(item[
|
|
299
|
-
});
|
|
291
|
+
if (isMultiple) {
|
|
292
|
+
if (selectedValue.length > 0) {
|
|
293
|
+
if (valueIsObject && Object.keys(selectedValue[0]).indexOf(primaryKey) >= 0) {
|
|
294
|
+
this.selectedNodes.set(selectedValue.map((item) => {
|
|
295
|
+
return this._findTreeNode(item[primaryKey]);
|
|
296
|
+
}));
|
|
300
297
|
}
|
|
301
298
|
else {
|
|
302
|
-
this.selectedNodes
|
|
299
|
+
this.selectedNodes.set(selectedValue.map((item) => {
|
|
303
300
|
return this._findTreeNode(item);
|
|
304
|
-
});
|
|
301
|
+
}));
|
|
305
302
|
}
|
|
306
303
|
}
|
|
307
304
|
}
|
|
308
305
|
else {
|
|
309
306
|
// 单选数据初始化
|
|
310
|
-
if (
|
|
311
|
-
if (Object.keys(
|
|
312
|
-
this.selectedNode
|
|
307
|
+
if (valueIsObject) {
|
|
308
|
+
if (Object.keys(selectedValue).indexOf(primaryKey) >= 0) {
|
|
309
|
+
this.selectedNode.set(this._findTreeNode(selectedValue[primaryKey]));
|
|
313
310
|
}
|
|
314
311
|
}
|
|
315
312
|
else {
|
|
316
|
-
this.selectedNode
|
|
313
|
+
this.selectedNode.set(this._findTreeNode(selectedValue));
|
|
317
314
|
}
|
|
318
315
|
}
|
|
319
316
|
}
|
|
320
317
|
else {
|
|
321
|
-
this.selectedNodes
|
|
322
|
-
this.selectedNode
|
|
318
|
+
this.selectedNodes.set([]);
|
|
319
|
+
this.selectedNode.set(null);
|
|
323
320
|
}
|
|
324
321
|
}
|
|
325
322
|
openSelectPop() {
|
|
326
|
-
if (this.thyDisable) {
|
|
323
|
+
if (this.thyDisable()) {
|
|
327
324
|
return;
|
|
328
325
|
}
|
|
329
|
-
this.cdkConnectOverlayWidth
|
|
330
|
-
this.expandTreeSelectOptions
|
|
331
|
-
this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
|
|
326
|
+
this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
|
|
327
|
+
this.expandTreeSelectOptions.set(!this.expandTreeSelectOptions());
|
|
328
|
+
this.thyExpandStatusChange.emit(this.expandTreeSelectOptions());
|
|
332
329
|
}
|
|
333
330
|
close() {
|
|
334
|
-
if (this.expandTreeSelectOptions) {
|
|
335
|
-
this.expandTreeSelectOptions
|
|
336
|
-
this.thyExpandStatusChange.emit(
|
|
331
|
+
if (this.expandTreeSelectOptions()) {
|
|
332
|
+
this.expandTreeSelectOptions.set(false);
|
|
333
|
+
this.thyExpandStatusChange.emit(false);
|
|
337
334
|
this.onTouchedFn();
|
|
338
335
|
}
|
|
339
336
|
}
|
|
340
337
|
clearSelectedValue(event) {
|
|
341
338
|
event.stopPropagation();
|
|
342
|
-
this.selectedValue
|
|
343
|
-
this.selectedNode
|
|
344
|
-
this.selectedNodes
|
|
345
|
-
this.onChangeFn(
|
|
339
|
+
this.selectedValue.set(null);
|
|
340
|
+
this.selectedNode.set(null);
|
|
341
|
+
this.selectedNodes.set([]);
|
|
342
|
+
this.onChangeFn(null);
|
|
346
343
|
}
|
|
347
344
|
_changeSelectValue() {
|
|
348
|
-
|
|
349
|
-
|
|
345
|
+
const selectedNodes = this.selectedNodes();
|
|
346
|
+
const selectedNode = this.selectedNode();
|
|
347
|
+
if (this.valueIsObject()) {
|
|
348
|
+
this.selectedValue.set(this.thyMultiple() ? selectedNodes : selectedNode);
|
|
350
349
|
}
|
|
351
350
|
else {
|
|
352
|
-
this.
|
|
353
|
-
|
|
354
|
-
: this.selectedNode[this.thyPrimaryKey];
|
|
351
|
+
const value = this.thyMultiple() ? selectedNodes.map(item => item[this.thyPrimaryKey()]) : selectedNode[this.thyPrimaryKey()];
|
|
352
|
+
this.selectedValue.set(value);
|
|
355
353
|
}
|
|
356
|
-
this.onChangeFn(this.selectedValue);
|
|
357
|
-
if (!this.thyMultiple) {
|
|
354
|
+
this.onChangeFn(this.selectedValue());
|
|
355
|
+
if (!this.thyMultiple()) {
|
|
358
356
|
this.onTouchedFn();
|
|
359
357
|
}
|
|
360
358
|
}
|
|
@@ -366,31 +364,31 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
366
364
|
if (event) {
|
|
367
365
|
event.stopPropagation();
|
|
368
366
|
}
|
|
369
|
-
if (this.thyDisable) {
|
|
367
|
+
if (this.thyDisable()) {
|
|
370
368
|
return;
|
|
371
369
|
}
|
|
372
|
-
if (this.thyMultiple) {
|
|
373
|
-
this.selectedNodes
|
|
374
|
-
return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
|
|
375
|
-
});
|
|
370
|
+
if (this.thyMultiple()) {
|
|
371
|
+
this.selectedNodes.set(produce(this.selectedNodes()).remove((item) => {
|
|
372
|
+
return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
|
|
373
|
+
}));
|
|
376
374
|
this._changeSelectValue();
|
|
377
375
|
}
|
|
378
376
|
}
|
|
379
377
|
selectNode(node) {
|
|
380
|
-
if (!this.thyMultiple) {
|
|
381
|
-
this.selectedNode
|
|
382
|
-
this.expandTreeSelectOptions
|
|
383
|
-
this.thyExpandStatusChange.emit(
|
|
378
|
+
if (!this.thyMultiple()) {
|
|
379
|
+
this.selectedNode.set(node);
|
|
380
|
+
this.expandTreeSelectOptions.set(false);
|
|
381
|
+
this.thyExpandStatusChange.emit(false);
|
|
384
382
|
this._changeSelectValue();
|
|
385
383
|
}
|
|
386
384
|
else {
|
|
387
|
-
if (this.selectedNodes.find(item => {
|
|
388
|
-
return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
|
|
385
|
+
if (this.selectedNodes().find(item => {
|
|
386
|
+
return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
|
|
389
387
|
})) {
|
|
390
388
|
this.removeSelectedNode(node);
|
|
391
389
|
}
|
|
392
390
|
else {
|
|
393
|
-
this.selectedNodes
|
|
391
|
+
this.selectedNodes.set(produce(this.selectedNodes()).add(node));
|
|
394
392
|
this._changeSelectValue();
|
|
395
393
|
}
|
|
396
394
|
}
|
|
@@ -398,27 +396,28 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
|
|
|
398
396
|
getNodeChildren(node) {
|
|
399
397
|
const result = this.thyGetNodeChildren(node);
|
|
400
398
|
if (result && result.subscribe) {
|
|
401
|
-
result.
|
|
402
|
-
const
|
|
399
|
+
result.subscribe((data) => {
|
|
400
|
+
const flattenTreeNodes = this.flattenTreeNodes();
|
|
401
|
+
const nodes = this.flattenNodes(data, [...node.parentValues, node[this.thyPrimaryKey()]]);
|
|
403
402
|
const otherNodes = nodes.filter((item) => {
|
|
404
|
-
return !
|
|
405
|
-
return hasItem[this.thyPrimaryKey] === item[this.thyPrimaryKey];
|
|
403
|
+
return !flattenTreeNodes.find(hasItem => {
|
|
404
|
+
return hasItem[this.thyPrimaryKey()] === item[this.thyPrimaryKey()];
|
|
406
405
|
});
|
|
407
406
|
});
|
|
408
|
-
this.flattenTreeNodes
|
|
407
|
+
this.flattenTreeNodes.set(flattenTreeNodes.concat(otherNodes));
|
|
409
408
|
node.children = data;
|
|
410
409
|
});
|
|
411
410
|
return result;
|
|
412
411
|
}
|
|
413
412
|
}
|
|
414
413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
415
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: "thyTreeNodes", thyVirtualScroll:
|
|
414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: { classPropertyName: "thyTreeNodes", publicName: "thyTreeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryKey: { classPropertyName: "thyPrimaryKey", publicName: "thyPrimaryKey", isSignal: true, isRequired: false, transformFunction: null }, thyShowKey: { classPropertyName: "thyShowKey", publicName: "thyShowKey", isSignal: true, isRequired: false, transformFunction: null }, thyChildCountKey: { classPropertyName: "thyChildCountKey", publicName: "thyChildCountKey", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyDisable: { classPropertyName: "thyDisable", publicName: "thyDisable", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyOptionsText: { classPropertyName: "thyEmptyOptionsText", publicName: "thyEmptyOptionsText", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeKey: { classPropertyName: "thyHiddenNodeKey", publicName: "thyHiddenNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisableNodeKey: { classPropertyName: "thyDisableNodeKey", publicName: "thyDisableNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyAsyncNode: { classPropertyName: "thyAsyncNode", publicName: "thyAsyncNode", isSignal: true, isRequired: false, transformFunction: null }, thyShowWholeName: { classPropertyName: "thyShowWholeName", publicName: "thyShowWholeName", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyIconType: { classPropertyName: "thyIconType", publicName: "thyIconType", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeFn: { classPropertyName: "thyHiddenNodeFn", publicName: "thyHiddenNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyDisableNodeFn: { classPropertyName: "thyDisableNodeFn", publicName: "thyDisableNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyGetNodeChildren: { classPropertyName: "thyGetNodeChildren", publicName: "thyGetNodeChildren", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "class.thy-select-custom--multiple": "thyMultiple()", "class.menu-is-opened": "expandTreeSelectOptions()", "attr.tabindex": "tabIndex" }, classAttribute: "thy-select-custom thy-select" }, providers: [
|
|
416
415
|
{
|
|
417
416
|
provide: NG_VALUE_ACCESSOR,
|
|
418
417
|
useExisting: forwardRef(() => ThyTreeSelect),
|
|
419
418
|
multi: true
|
|
420
419
|
}
|
|
421
|
-
], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true,
|
|
420
|
+
], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true, isSignal: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "customDisplayTemplate", first: true, predicate: ["customDisplayTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions()\"\n [thySelectedOptions]=\"selectedValueObject()\"\n [thyIsMultiple]=\"thyMultiple()\"\n [thyAllowClear]=\"thyAllowClear()\"\n [thySize]=\"thySize()\"\n [thyPlaceholder]=\"thyPlaceholder()\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch()\"\n [thyDisabled]=\"thyDisable()\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef()) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey()] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll()\"\n [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => ThySelectControl), selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i0.forwardRef(() => ThyTreeSelectNodes), selector: "thy-tree-select-nodes", inputs: ["treeNodes", "thyVirtualScroll"] }, { kind: "directive", type: i0.forwardRef(() => ThyStopPropagationDirective), selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], animations: [scaleYMotion] }); }
|
|
422
421
|
}
|
|
423
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, decorators: [{
|
|
424
423
|
type: Component,
|
|
@@ -436,79 +435,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
436
435
|
forwardRef(() => ThyTreeSelectNodes),
|
|
437
436
|
ThyStopPropagationDirective
|
|
438
437
|
], host: {
|
|
438
|
+
class: 'thy-select-custom thy-select',
|
|
439
|
+
'[class.thy-select-custom--multiple]': 'thyMultiple()',
|
|
440
|
+
'[class.menu-is-opened]': 'expandTreeSelectOptions()',
|
|
439
441
|
'[attr.tabindex]': 'tabIndex',
|
|
440
442
|
'(focus)': 'onFocus($event)',
|
|
441
443
|
'(blur)': 'onBlur($event)'
|
|
442
|
-
}, animations: [scaleYMotion], template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions\"\n [thySelectedOptions]=\"selectedValueObject\"\n [thyIsMultiple]=\"thyMultiple\"\n [thyAllowClear]=\"thyAllowClear\"\n [thySize]=\"thySize\"\n [thyPlaceholder]=\"
|
|
443
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
444
|
-
type: HostBinding,
|
|
445
|
-
args: ['class.thy-select-custom']
|
|
446
|
-
}], isTreeSelect: [{
|
|
447
|
-
type: HostBinding,
|
|
448
|
-
args: ['class.thy-select']
|
|
449
|
-
}], expandTreeSelectOptions: [{
|
|
450
|
-
type: HostBinding,
|
|
451
|
-
args: ['class.menu-is-opened']
|
|
452
|
-
}], isMulti: [{
|
|
453
|
-
type: HostBinding,
|
|
454
|
-
args: ['class.thy-select-custom--multiple']
|
|
455
|
-
}], thyTreeSelectTriggerDisplayRef: [{
|
|
456
|
-
type: ContentChild,
|
|
457
|
-
args: ['thyTreeSelectTriggerDisplay']
|
|
458
|
-
}], treeNodeTemplateRef: [{
|
|
459
|
-
type: ContentChild,
|
|
460
|
-
args: ['treeNodeTemplate']
|
|
461
|
-
}], cdkOverlayOrigin: [{
|
|
462
|
-
type: ViewChild,
|
|
463
|
-
args: [CdkOverlayOrigin, { static: true }]
|
|
464
|
-
}], cdkConnectedOverlay: [{
|
|
465
|
-
type: ViewChild,
|
|
466
|
-
args: [CdkConnectedOverlay, { static: true }]
|
|
467
|
-
}], customDisplayTemplate: [{
|
|
468
|
-
type: ViewChild,
|
|
469
|
-
args: ['customDisplayTemplate', { static: true }]
|
|
470
|
-
}], thyTreeNodes: [{
|
|
471
|
-
type: Input
|
|
472
|
-
}], thyVirtualScroll: [{
|
|
473
|
-
type: Input,
|
|
474
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
475
|
-
}], thyPrimaryKey: [{
|
|
476
|
-
type: Input
|
|
477
|
-
}], thyShowKey: [{
|
|
478
|
-
type: Input
|
|
479
|
-
}], thyChildCountKey: [{
|
|
480
|
-
type: Input
|
|
481
|
-
}], thyAllowClear: [{
|
|
482
|
-
type: Input,
|
|
483
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
484
|
-
}], thyMultiple: [{
|
|
485
|
-
type: Input,
|
|
486
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
487
|
-
}], thyDisable: [{
|
|
488
|
-
type: Input,
|
|
489
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
490
|
-
}], thyPlaceholder: [{
|
|
491
|
-
type: Input
|
|
492
|
-
}], thySize: [{
|
|
493
|
-
type: Input
|
|
494
|
-
}], thyEmptyOptionsText: [{
|
|
495
|
-
type: Input
|
|
496
|
-
}], thyHiddenNodeKey: [{
|
|
497
|
-
type: Input
|
|
498
|
-
}], thyDisableNodeKey: [{
|
|
499
|
-
type: Input
|
|
500
|
-
}], thyAsyncNode: [{
|
|
501
|
-
type: Input,
|
|
502
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
503
|
-
}], thyShowWholeName: [{
|
|
504
|
-
type: Input,
|
|
505
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
506
|
-
}], thyShowSearch: [{
|
|
507
|
-
type: Input,
|
|
508
|
-
args: [{ transform: coerceBooleanProperty }]
|
|
509
|
-
}], thyIconType: [{
|
|
510
|
-
type: Input
|
|
511
|
-
}], thyHiddenNodeFn: [{
|
|
444
|
+
}, animations: [scaleYMotion], template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions()\"\n [thySelectedOptions]=\"selectedValueObject()\"\n [thyIsMultiple]=\"thyMultiple()\"\n [thyAllowClear]=\"thyAllowClear()\"\n [thySize]=\"thySize()\"\n [thyPlaceholder]=\"thyPlaceholder()\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch()\"\n [thyDisabled]=\"thyDisable()\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef()) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey()] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll()\"\n [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n" }]
|
|
445
|
+
}], ctorParameters: () => [], propDecorators: { thyHiddenNodeFn: [{
|
|
512
446
|
type: Input
|
|
513
447
|
}], thyDisableNodeFn: [{
|
|
514
448
|
type: Input
|
|
@@ -523,68 +457,73 @@ class ThyTreeSelectNodes {
|
|
|
523
457
|
constructor() {
|
|
524
458
|
this.parent = inject(ThyTreeSelect);
|
|
525
459
|
this.emptyIcon = injectPanelEmptyIcon();
|
|
526
|
-
this.
|
|
527
|
-
this.thyVirtualScroll = false;
|
|
528
|
-
this.
|
|
529
|
-
this.
|
|
530
|
-
this.
|
|
531
|
-
this.valueIsObject = this.parent.valueIsObject;
|
|
532
|
-
this.selectedValue = this.parent.selectedValue;
|
|
533
|
-
this.childCountKey = this.parent.thyChildCountKey;
|
|
534
|
-
this.treeNodeTemplateRef = this.parent.treeNodeTemplateRef;
|
|
460
|
+
this.treeNodes = input([]);
|
|
461
|
+
this.thyVirtualScroll = input(false);
|
|
462
|
+
this.isMultiple = computed(() => this.parent.thyMultiple());
|
|
463
|
+
this.childCountKey = computed(() => this.parent.thyChildCountKey());
|
|
464
|
+
this.treeNodeTemplateRef = computed(() => this.parent.treeNodeTemplateRef());
|
|
535
465
|
this.defaultItemSize = DEFAULT_ITEM_SIZE;
|
|
536
|
-
this.
|
|
537
|
-
this.
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
466
|
+
this.thyPrimaryKey = computed(() => this.parent.thyPrimaryKey());
|
|
467
|
+
this.selectedNodes = computed(() => this.parent.selectedNodes());
|
|
468
|
+
this.selectedNode = computed(() => this.parent.selectedNode());
|
|
469
|
+
this.hiddenNodeKey = computed(() => this.parent.thyHiddenNodeKey());
|
|
470
|
+
this.disableNodeKey = computed(() => this.parent.thyDisableNodeKey());
|
|
471
|
+
this.thyVirtualHeight = computed(() => {
|
|
472
|
+
const treeSelectHeight = this.defaultItemSize * this.treeNodes().length;
|
|
473
|
+
// 父级设置了max-height:300 & padding:10 0; 故此处最多设置280,否则将出现滚动条
|
|
474
|
+
return treeSelectHeight > 300 ? '280px' : `${treeSelectHeight}px`;
|
|
475
|
+
});
|
|
476
|
+
this.hasNodeChildren = computed(() => {
|
|
477
|
+
return this.treeNodes().every(item => !item.hasOwnProperty('children') || (!item?.children?.length && !item?.childCount));
|
|
478
|
+
});
|
|
548
479
|
}
|
|
549
480
|
treeNodeIsSelected(node) {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
481
|
+
const primaryKey = this.thyPrimaryKey();
|
|
482
|
+
const isMultiple = this.isMultiple();
|
|
483
|
+
if (isMultiple) {
|
|
484
|
+
const selectedNodes = this.selectedNodes() || [];
|
|
485
|
+
return selectedNodes.find(item => {
|
|
486
|
+
return item[primaryKey] === node[primaryKey];
|
|
553
487
|
});
|
|
554
488
|
}
|
|
555
489
|
else {
|
|
556
|
-
return this.
|
|
490
|
+
return this.selectedNode() && this.selectedNode()[primaryKey] === node[primaryKey];
|
|
557
491
|
}
|
|
558
492
|
}
|
|
559
493
|
treeNodeIsHidden(node) {
|
|
560
|
-
|
|
561
|
-
|
|
494
|
+
const hiddenNodeKey = this.hiddenNodeKey();
|
|
495
|
+
if (hiddenNodeKey) {
|
|
496
|
+
return node[hiddenNodeKey];
|
|
562
497
|
}
|
|
563
|
-
|
|
564
|
-
|
|
498
|
+
const thyHiddenNodeFn = this.parent.thyHiddenNodeFn;
|
|
499
|
+
if (thyHiddenNodeFn) {
|
|
500
|
+
return thyHiddenNodeFn(node);
|
|
565
501
|
}
|
|
566
502
|
return false;
|
|
567
503
|
}
|
|
568
504
|
treeNodeIsDisable(node) {
|
|
569
|
-
|
|
570
|
-
|
|
505
|
+
const disableNodeKey = this.disableNodeKey();
|
|
506
|
+
if (disableNodeKey) {
|
|
507
|
+
return node[disableNodeKey];
|
|
571
508
|
}
|
|
572
|
-
|
|
573
|
-
|
|
509
|
+
const thyDisableNodeFn = this.parent.thyDisableNodeFn;
|
|
510
|
+
if (thyDisableNodeFn) {
|
|
511
|
+
return thyDisableNodeFn(node);
|
|
574
512
|
}
|
|
575
513
|
return false;
|
|
576
514
|
}
|
|
577
515
|
treeNodeIsExpand(node) {
|
|
516
|
+
const isMultiple = this.isMultiple();
|
|
517
|
+
const primaryKey = this.thyPrimaryKey();
|
|
578
518
|
let isSelectedNodeParent = false;
|
|
579
|
-
if (
|
|
580
|
-
|
|
581
|
-
|
|
519
|
+
if (isMultiple) {
|
|
520
|
+
const selectedNodes = this.selectedNodes() || [];
|
|
521
|
+
isSelectedNodeParent = !!selectedNodes.find(item => {
|
|
522
|
+
return item.parentValues.indexOf(node[primaryKey]) > -1;
|
|
582
523
|
});
|
|
583
524
|
}
|
|
584
525
|
else {
|
|
585
|
-
isSelectedNodeParent = this.
|
|
586
|
-
? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1
|
|
587
|
-
: false;
|
|
526
|
+
isSelectedNodeParent = this.selectedNode() ? this.selectedNode().parentValues.indexOf(node[primaryKey]) > -1 : false;
|
|
588
527
|
}
|
|
589
528
|
const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent);
|
|
590
529
|
node.expand = isExpand;
|
|
@@ -611,13 +550,13 @@ class ThyTreeSelectNodes {
|
|
|
611
550
|
node.expand = true;
|
|
612
551
|
}
|
|
613
552
|
}
|
|
614
|
-
if (node.expand && this.parent.thyAsyncNode) {
|
|
553
|
+
if (node.expand && this.parent.thyAsyncNode()) {
|
|
615
554
|
this.getNodeChildren(node).subscribe(() => {
|
|
616
555
|
this.parent.setPosition();
|
|
617
556
|
});
|
|
618
557
|
}
|
|
619
558
|
// this.parent.setPosition();
|
|
620
|
-
if (this.thyVirtualScroll) {
|
|
559
|
+
if (this.thyVirtualScroll()) {
|
|
621
560
|
this.parent.buildFlattenTreeNodes();
|
|
622
561
|
}
|
|
623
562
|
}
|
|
@@ -625,7 +564,7 @@ class ThyTreeSelectNodes {
|
|
|
625
564
|
return index;
|
|
626
565
|
}
|
|
627
566
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: "treeNodes", thyVirtualScroll: "thyVirtualScroll" }, host: { properties: { "attr.tabindex": "-1", "class": "
|
|
567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: { classPropertyName: "treeNodes", publicName: "treeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "-1", "class.thy-tree-select-dropdown-multiple": "isMultiple()" }, classAttribute: "thy-tree-select-dropdown" }, ngImport: i0, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!isVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (isVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText()\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n @if (treeNodeTemplateRef()) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple()) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }] }); }
|
|
629
568
|
}
|
|
630
569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, decorators: [{
|
|
631
570
|
type: Component,
|
|
@@ -640,16 +579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
640
579
|
ThyIcon,
|
|
641
580
|
ThyFlexibleText
|
|
642
581
|
], host: {
|
|
643
|
-
'[attr.tabindex]': '-1'
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
}], treeNodes: [{
|
|
649
|
-
type: Input
|
|
650
|
-
}], thyVirtualScroll: [{
|
|
651
|
-
type: Input
|
|
652
|
-
}] } });
|
|
582
|
+
'[attr.tabindex]': '-1',
|
|
583
|
+
class: 'thy-tree-select-dropdown',
|
|
584
|
+
'[class.thy-tree-select-dropdown-multiple]': 'isMultiple()'
|
|
585
|
+
}, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!isVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (isVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText()\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n @if (treeNodeTemplateRef()) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple()) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n" }]
|
|
586
|
+
}] });
|
|
653
587
|
|
|
654
588
|
class ThyTreeSelectModule {
|
|
655
589
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|