@uni-design-system/uni-angular 2.0.4 → 3.0.0
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.
|
@@ -1,10 +1,279 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, Component, HostBinding, Input, Renderer2, ElementRef, HostListener, Directive, EventEmitter, effect, Output, output, ViewChild, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { css, keyframes } from '@emotion/css';
|
|
4
4
|
import { UniThemes, LightTheme, Z_INDEX, fadeIn, fadeOut } from '@uni-design-system/uni-core';
|
|
5
5
|
import { NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
6
6
|
import { autoUpdate, computePosition, offset, shift, flip, arrow } from '@floating-ui/dom';
|
|
7
7
|
|
|
8
|
+
class UniBaseDatasource {
|
|
9
|
+
selections = signal([], ...(ngDevMode ? [{ debugName: "selections" }] : /* istanbul ignore next */ []));
|
|
10
|
+
sort = signal({
|
|
11
|
+
column: undefined,
|
|
12
|
+
direction: 'indet',
|
|
13
|
+
}, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
|
|
14
|
+
sortColumn = computed(() => this.sort().column, ...(ngDevMode ? [{ debugName: "sortColumn" }] : /* istanbul ignore next */ []));
|
|
15
|
+
sortDirection = computed(() => this.sort().direction, ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
|
|
16
|
+
pages = computed(() => Array.from({ length: this.pageCount() }, (_, index) => index + 1), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
|
|
17
|
+
startIndex = computed(() => {
|
|
18
|
+
const pageSize = this.pageSize();
|
|
19
|
+
const pageIndex = this.pageIndex();
|
|
20
|
+
return pageSize > 0 ? pageIndex * pageSize : 0;
|
|
21
|
+
}, ...(ngDevMode ? [{ debugName: "startIndex" }] : /* istanbul ignore next */ []));
|
|
22
|
+
endIndex = computed(() => {
|
|
23
|
+
const pageSize = this.pageSize();
|
|
24
|
+
const total = this.recordCount();
|
|
25
|
+
// If unpaginated (pageSize = 0), return total count
|
|
26
|
+
if (pageSize === 0) {
|
|
27
|
+
return total;
|
|
28
|
+
}
|
|
29
|
+
const start = this.startIndex();
|
|
30
|
+
return Math.min(start + pageSize, total);
|
|
31
|
+
}, ...(ngDevMode ? [{ debugName: "endIndex" }] : /* istanbul ignore next */ []));
|
|
32
|
+
disablePrevious = computed(() => {
|
|
33
|
+
const pageSize = this.pageSize();
|
|
34
|
+
return pageSize === 0 ? true : this.pageIndex() === 0;
|
|
35
|
+
}, ...(ngDevMode ? [{ debugName: "disablePrevious" }] : /* istanbul ignore next */ []));
|
|
36
|
+
disableNext = computed(() => {
|
|
37
|
+
const pageSize = this.pageSize();
|
|
38
|
+
return pageSize === 0 ? true : this.pageIndex() + 1 >= this.pageCount();
|
|
39
|
+
}, ...(ngDevMode ? [{ debugName: "disableNext" }] : /* istanbul ignore next */ []));
|
|
40
|
+
truncatedPages = computed(() => {
|
|
41
|
+
const currentPage = this.pageIndex() + 1;
|
|
42
|
+
const displayRange = 3;
|
|
43
|
+
const totalPages = this.pageCount();
|
|
44
|
+
const pages = [];
|
|
45
|
+
const startPage = Math.max(1, currentPage - displayRange);
|
|
46
|
+
const endPage = Math.min(totalPages, currentPage + displayRange);
|
|
47
|
+
if (startPage > 1) {
|
|
48
|
+
pages.push(1);
|
|
49
|
+
if (startPage > 2) {
|
|
50
|
+
pages.push('...');
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
for (let i = startPage; i <= endPage; i++) {
|
|
54
|
+
pages.push(i);
|
|
55
|
+
}
|
|
56
|
+
if (endPage < totalPages) {
|
|
57
|
+
if (endPage < totalPages - 1) {
|
|
58
|
+
pages.push('...');
|
|
59
|
+
}
|
|
60
|
+
pages.push(totalPages);
|
|
61
|
+
}
|
|
62
|
+
return pages;
|
|
63
|
+
}, ...(ngDevMode ? [{ debugName: "truncatedPages" }] : /* istanbul ignore next */ []));
|
|
64
|
+
isSelected(row) {
|
|
65
|
+
return this.selections().some((selection) => selection === row);
|
|
66
|
+
}
|
|
67
|
+
toggleSelection(row) {
|
|
68
|
+
this.selections.update((selections) => {
|
|
69
|
+
return selections.includes(row) ? selections.filter((i) => i !== row) : [...selections, row];
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
clearSelections() {
|
|
73
|
+
this.selections.set([]);
|
|
74
|
+
}
|
|
75
|
+
selectAll() {
|
|
76
|
+
this.selections.set([...this.records()]);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
class UniRecordDatasource extends UniBaseDatasource {
|
|
81
|
+
_pageNumber = signal(1, ...(ngDevMode ? [{ debugName: "_pageNumber" }] : /* istanbul ignore next */ []));
|
|
82
|
+
_pageSize = signal(0, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ [])); // 0 = unpaginated (show all)
|
|
83
|
+
initialRecords = signal([], ...(ngDevMode ? [{ debugName: "initialRecords" }] : /* istanbul ignore next */ []));
|
|
84
|
+
recordCount = computed(() => this.initialRecords().filter(this.filter()).length, ...(ngDevMode ? [{ debugName: "recordCount" }] : /* istanbul ignore next */ []));
|
|
85
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
86
|
+
filter = signal((value) => true, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
|
|
87
|
+
pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
88
|
+
pageSize = computed(() => this._pageSize(), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
89
|
+
pageCount = computed(() => {
|
|
90
|
+
const pageSize = this.pageSize();
|
|
91
|
+
return pageSize > 0 ? Math.ceil(this.recordCount() / pageSize) : 1;
|
|
92
|
+
}, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
|
|
93
|
+
records = computed(() => {
|
|
94
|
+
const { column, direction } = this.sort();
|
|
95
|
+
const filter = this.filter();
|
|
96
|
+
const pageSize = this.pageSize();
|
|
97
|
+
let filteredRecords = this.initialRecords().filter(filter);
|
|
98
|
+
// Apply sorting if specified
|
|
99
|
+
if (column && direction !== 'indet') {
|
|
100
|
+
filteredRecords = [...filteredRecords].sort((a, b) => {
|
|
101
|
+
const valueA = a[column];
|
|
102
|
+
const valueB = b[column];
|
|
103
|
+
const isString = typeof valueA === 'string';
|
|
104
|
+
const isAsc = direction === 'asc';
|
|
105
|
+
return isString
|
|
106
|
+
? stringCompare(valueA, valueB, isAsc)
|
|
107
|
+
: numberCompare(valueA, valueB, isAsc);
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
// Apply pagination only if pageSize > 0
|
|
111
|
+
if (pageSize > 0) {
|
|
112
|
+
return filteredRecords.slice(this.startIndex(), this.endIndex());
|
|
113
|
+
}
|
|
114
|
+
// Return all records (unpaginated)
|
|
115
|
+
return filteredRecords;
|
|
116
|
+
}, ...(ngDevMode ? [{ debugName: "records" }] : /* istanbul ignore next */ []));
|
|
117
|
+
constructor(data) {
|
|
118
|
+
super();
|
|
119
|
+
this.initialRecords.set(data);
|
|
120
|
+
}
|
|
121
|
+
sortRecords(sort) {
|
|
122
|
+
this.sort.set(sort);
|
|
123
|
+
}
|
|
124
|
+
firstPage() {
|
|
125
|
+
this.pageIndex.set(0);
|
|
126
|
+
}
|
|
127
|
+
nextPage() {
|
|
128
|
+
if (this.pageIndex() < this.pageCount() - 1) {
|
|
129
|
+
this.pageIndex.update((i) => i + 1);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
previousPage() {
|
|
133
|
+
this.pageIndex.update((i) => (i > 1 ? i - 1 : 0));
|
|
134
|
+
}
|
|
135
|
+
lastPage() {
|
|
136
|
+
this.pageIndex.set(this.pageCount() - 1);
|
|
137
|
+
}
|
|
138
|
+
jumpToPage(page) {
|
|
139
|
+
const i = page - 1;
|
|
140
|
+
if (i >= 0 && i < this.pageCount()) {
|
|
141
|
+
this.pageIndex.set(i);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
setPageSize(size) {
|
|
145
|
+
this._pageSize.set(size);
|
|
146
|
+
if (size > 0) {
|
|
147
|
+
this._pageNumber.set(1);
|
|
148
|
+
this.pageIndex.set(0);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
setFilter(filter) {
|
|
152
|
+
this.filter.set(filter);
|
|
153
|
+
}
|
|
154
|
+
clearFilter() {
|
|
155
|
+
this.filter.set(() => true);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
function stringCompare(a = 'zzz', b = 'zzz', isAsc) {
|
|
159
|
+
a = a.toString();
|
|
160
|
+
b = b.toString();
|
|
161
|
+
return isAsc
|
|
162
|
+
? a.localeCompare(b, undefined, { sensitivity: 'base' })
|
|
163
|
+
: b.localeCompare(a, undefined, { sensitivity: 'base' });
|
|
164
|
+
}
|
|
165
|
+
function numberCompare(a = 0, b = 0, isAsc) {
|
|
166
|
+
return isAsc ? a - b : b - a;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
class UniServerSideDatasource extends UniBaseDatasource {
|
|
170
|
+
dataLoader;
|
|
171
|
+
_pageNumber = signal(1, ...(ngDevMode ? [{ debugName: "_pageNumber" }] : /* istanbul ignore next */ []));
|
|
172
|
+
_pageSize = signal(10, ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
|
|
173
|
+
_sortColumn = signal(undefined, ...(ngDevMode ? [{ debugName: "_sortColumn" }] : /* istanbul ignore next */ []));
|
|
174
|
+
_sortDirection = signal('indet', ...(ngDevMode ? [{ debugName: "_sortDirection" }] : /* istanbul ignore next */ []));
|
|
175
|
+
filter = signal({}, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
|
|
176
|
+
sortColumn = computed(() => this._sortColumn(), ...(ngDevMode ? [{ debugName: "sortColumn" }] : /* istanbul ignore next */ []));
|
|
177
|
+
sortDirection = computed(() => this._sortDirection(), ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
|
|
178
|
+
totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
|
|
179
|
+
dataResource;
|
|
180
|
+
pageIndex = computed(() => this._pageNumber() - 1, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
|
|
181
|
+
pageSize = computed(() => this._pageSize(), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
182
|
+
pageCount = computed(() => {
|
|
183
|
+
const total = this.totalRecords();
|
|
184
|
+
const size = this.pageSize();
|
|
185
|
+
return total > 0 ? Math.ceil(total / size) : 0;
|
|
186
|
+
}, ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
|
|
187
|
+
_records = linkedSignal({ ...(ngDevMode ? { debugName: "_records" } : /* istanbul ignore next */ {}), source: () => ({
|
|
188
|
+
val: this.dataResource.value(),
|
|
189
|
+
status: this.dataResource.status(),
|
|
190
|
+
}),
|
|
191
|
+
computation: (source, previous) => {
|
|
192
|
+
if (source.status === 'loading' && previous) {
|
|
193
|
+
return previous.value;
|
|
194
|
+
}
|
|
195
|
+
return source.val?.data ?? [];
|
|
196
|
+
} });
|
|
197
|
+
records = this._records.asReadonly();
|
|
198
|
+
recordCount = computed(() => this.totalRecords(), ...(ngDevMode ? [{ debugName: "recordCount" }] : /* istanbul ignore next */ []));
|
|
199
|
+
isLoading = computed(() => this.dataResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
200
|
+
error = computed(() => this.dataResource.error(), ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
201
|
+
hasError = computed(() => this.dataResource.hasValue() === false && this.error() !== undefined, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
202
|
+
constructor(dataLoader, initialPageSize = 10) {
|
|
203
|
+
super();
|
|
204
|
+
this.dataLoader = dataLoader;
|
|
205
|
+
this._pageSize.set(initialPageSize);
|
|
206
|
+
this.dataResource = resource({ ...(ngDevMode ? { debugName: "dataResource" } : /* istanbul ignore next */ {}), params: () => ({
|
|
207
|
+
pageNumber: this._pageNumber(),
|
|
208
|
+
pageSize: this._pageSize(),
|
|
209
|
+
sortColumn: this._sortColumn(),
|
|
210
|
+
sortDirection: this._sortDirection(),
|
|
211
|
+
filter: this.filter(),
|
|
212
|
+
}),
|
|
213
|
+
loader: async (params) => {
|
|
214
|
+
const request = params.params;
|
|
215
|
+
const response = await this.dataLoader(request);
|
|
216
|
+
if (request.pageNumber === 1 || this.totalRecords() === 0) {
|
|
217
|
+
this.totalRecords.set(response.totalRecords);
|
|
218
|
+
}
|
|
219
|
+
return response;
|
|
220
|
+
} });
|
|
221
|
+
}
|
|
222
|
+
sortRecords(sort) {
|
|
223
|
+
this.sort.set(sort);
|
|
224
|
+
this._sortColumn.set(sort.column);
|
|
225
|
+
this._sortDirection.set(sort.direction);
|
|
226
|
+
this._pageNumber.set(1);
|
|
227
|
+
}
|
|
228
|
+
firstPage() {
|
|
229
|
+
this._pageNumber.set(1);
|
|
230
|
+
}
|
|
231
|
+
nextPage() {
|
|
232
|
+
if (this._pageNumber() < this.pageCount()) {
|
|
233
|
+
this._pageNumber.update((n) => n + 1);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
previousPage() {
|
|
237
|
+
if (this._pageNumber() > 1) {
|
|
238
|
+
this._pageNumber.update((n) => n - 1);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
lastPage() {
|
|
242
|
+
this._pageNumber.set(this.pageCount());
|
|
243
|
+
}
|
|
244
|
+
jumpToPage(page) {
|
|
245
|
+
if (page >= 1 && page <= this.pageCount()) {
|
|
246
|
+
this._pageNumber.set(page);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
setPageSize(size) {
|
|
250
|
+
if (size > 0) {
|
|
251
|
+
this._pageSize.set(size);
|
|
252
|
+
this._pageNumber.set(1);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
setFilter(filterValues) {
|
|
256
|
+
this.filter.set(filterValues);
|
|
257
|
+
this._pageNumber.set(1);
|
|
258
|
+
}
|
|
259
|
+
clearFilter() {
|
|
260
|
+
this.filter.set({});
|
|
261
|
+
this._pageNumber.set(1);
|
|
262
|
+
}
|
|
263
|
+
refresh() {
|
|
264
|
+
this.dataResource.reload();
|
|
265
|
+
}
|
|
266
|
+
getPageRequest() {
|
|
267
|
+
return {
|
|
268
|
+
pageNumber: this._pageNumber(),
|
|
269
|
+
pageSize: this._pageSize(),
|
|
270
|
+
sortColumn: this._sortColumn(),
|
|
271
|
+
sortDirection: this._sortDirection(),
|
|
272
|
+
filter: this.filter(),
|
|
273
|
+
};
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
8
277
|
function memoize(fn) {
|
|
9
278
|
const cache = new Map();
|
|
10
279
|
return ((...args) => {
|
|
@@ -1940,5 +2209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1940
2209
|
* Generated bundle index. Do not edit.
|
|
1941
2210
|
*/
|
|
1942
2211
|
|
|
1943
|
-
export { RippleDirective, UniBadgeComponent, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconComponent, UniMenuComponent, UniRowComponent, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent };
|
|
2212
|
+
export { LocalStorageService, NotificationService, RippleDirective, ThemeService, UNI_THEMES, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniGridAreaComponent, UniGridComponent, UniIconComponent, UniMenuComponent, UniRecordDatasource, UniRowComponent, UniServerSideDatasource, UniStackComponent, UniSymbolComponent, UniTextComponent, UniTooltipComponent, UniWrapComponent, useTimer };
|
|
1944
2213
|
//# sourceMappingURL=uni-design-system-uni-angular.mjs.map
|