@g1cloud/open-bluesea-grid 1.0.0-alpha.1

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.
@@ -0,0 +1,29 @@
1
+ interface HttpResponse<T = unknown> {
2
+ data: T;
3
+ headers: Record<string, unknown>;
4
+ }
5
+ export declare class PaginatedList<T> {
6
+ data: T[];
7
+ totalCount: number;
8
+ offset: number;
9
+ limit: number;
10
+ static of<T>(data?: T[], totalCount?: number | undefined, offset?: number, limit?: number | undefined): PaginatedList<T>;
11
+ /**
12
+ * `AxiosResponse` 등의 http response 로부터 `PaginatedList` 를 생성한다.
13
+ * @param response
14
+ * @param converter
15
+ */
16
+ static fromAxiosResponse<T, D = T>(response: HttpResponse<T[]>, converter?: (data: T) => D): PaginatedList<D>;
17
+ /**
18
+ * Axios Header 와 response data 로부터 `PaginatedList` 를 생성한다.
19
+ * @param headers
20
+ * @param data
21
+ * @param converter
22
+ */
23
+ static fromAxiosHeader<T, D = T>(headers: Record<string, unknown>, data: T[], converter?: (data: T) => D): PaginatedList<D>;
24
+ /**
25
+ * @return 로딩된 데이터가 비어있으면 true
26
+ */
27
+ isEmpty(): boolean;
28
+ }
29
+ export {};
@@ -0,0 +1,21 @@
1
+ import { type Filter } from "@/model/FilterModel";
2
+ export type Sort = {
3
+ propertyId: string;
4
+ ascending?: boolean;
5
+ nullHandling?: 'Default' | 'NullsFirst' | 'NullsLast';
6
+ };
7
+ export type QueryMap = {
8
+ filter?: string;
9
+ sort?: string;
10
+ offset?: number;
11
+ limit?: number;
12
+ };
13
+ export declare class SearchParam {
14
+ offset?: number;
15
+ limit?: number;
16
+ gridFilter: Record<string, any>;
17
+ lookupFilter: Filter[];
18
+ defaultFilter: Filter[];
19
+ sorts?: Sort[];
20
+ toQueryMap(): QueryMap;
21
+ }
@@ -0,0 +1,376 @@
1
+ .resize-handle[data-v-3bda3a20] {
2
+ position: absolute;
3
+ width: 5px;
4
+ right: -1px;
5
+ top: 0;
6
+ bottom: 0;
7
+ cursor: col-resize;
8
+ z-index: 10000;
9
+ opacity: 0.2;
10
+ }
11
+ .resize-handle .resize-guide[data-v-3bda3a20] {
12
+ position: absolute;
13
+ border-left: 1px dashed #000000;
14
+ top: 0;
15
+ right: 0;
16
+ bottom: -500px;
17
+ }.sort-icon[data-v-e140e95e] {
18
+ line-height: 1;
19
+ }
20
+ .sort-icon.descending[data-v-e140e95e] {
21
+ transform: rotate(180deg);
22
+ }.checked .font-icon {
23
+ font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48;
24
+ color: var(--primary);
25
+ }.checked .font-icon[data-v-0211159f] {
26
+ font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
27
+ color: var(--primary);
28
+ }
29
+ .disabled[data-v-0211159f] {
30
+ color: var(--gray-400);
31
+ }.drag-handle > .font-icon {
32
+ font-size: 1.8em;
33
+ margin-left: -2px;
34
+ cursor: grab;
35
+ user-select: none;
36
+ }
37
+ .drag-handle > .font-icon:active {
38
+ cursor: grabbing;
39
+ }:root {
40
+ --grid-cell-padding: 8px;
41
+ --grid-row-odd-color: var(--body-bg);
42
+ --grid-row-even-color: var(--gray-100);
43
+ }
44
+ .bs-grid {
45
+ position: relative;
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+ .bs-grid > .table-wrap {
50
+ overflow: auto;
51
+ flex-grow: 1;
52
+ background-color: var(--gray-100);
53
+ border-top: 1px solid var(--gray-200);
54
+ border-bottom: 1px solid var(--gray-200);
55
+ }
56
+ .bs-grid > .table-wrap > table {
57
+ flex-grow: 1;
58
+ table-layout: fixed;
59
+ border-collapse: collapse;
60
+ box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.03);
61
+ }
62
+ .bs-grid > .table-wrap > table > thead > tr > td,
63
+ .bs-grid > .table-wrap > table > thead > tr > th,
64
+ .bs-grid > .table-wrap > table tbody > tr > td,
65
+ .bs-grid > .table-wrap > table tbody > tr > th {
66
+ vertical-align: middle;
67
+ }
68
+ .bs-grid > .table-wrap > table > thead > tr > td > div,
69
+ .bs-grid > .table-wrap > table > thead > tr > th > div,
70
+ .bs-grid > .table-wrap > table tbody > tr > td > div,
71
+ .bs-grid > .table-wrap > table tbody > tr > th > div {
72
+ padding: var(--grid-cell-padding);
73
+ overflow: hidden;
74
+ min-height: 1em;
75
+ }
76
+ .bs-grid > .table-wrap > table > thead > tr > td > div > a,
77
+ .bs-grid > .table-wrap > table > thead > tr > th > div > a,
78
+ .bs-grid > .table-wrap > table tbody > tr > td > div > a,
79
+ .bs-grid > .table-wrap > table tbody > tr > th > div > a {
80
+ color: var(--body-text) !important;
81
+ }
82
+ .bs-grid > .table-wrap > table > thead > tr > td.editing > div,
83
+ .bs-grid > .table-wrap > table tbody > tr > td.editing > div {
84
+ overflow: visible;
85
+ }
86
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell {
87
+ min-width: 32px;
88
+ line-height: 1;
89
+ }
90
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell > div {
91
+ border-right: 1px solid var(--gray-200);
92
+ }
93
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell:last-child > div {
94
+ border-right: 0 none;
95
+ }
96
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox {
97
+ color: var(--color-text-light);
98
+ }
99
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.checkbox.checked {
100
+ color: var(--color-text);
101
+ }
102
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.serial-no {
103
+ min-width: 40px;
104
+ }
105
+ .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.edit-icon {
106
+ min-width: 33px;
107
+ }
108
+ .bs-grid > .table-wrap > table > thead > tr.header-row:has(.has-filter) th > div {
109
+ height: 50px;
110
+ }
111
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th {
112
+ position: sticky;
113
+ top: 0;
114
+ z-index: 1;
115
+ white-space: nowrap;
116
+ vertical-align: middle;
117
+ background-color: var(--gray-100);
118
+ }
119
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
120
+ .bs-multi-select,
121
+ .bs-tree-select,
122
+ .bs-tree-multi-select):not(:has(.empty)) {
123
+ background-color: var(--primary-100);
124
+ }
125
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th:last-child > div {
126
+ border-right-color: transparent;
127
+ }
128
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div {
129
+ border-right: 1px solid var(--gray-200);
130
+ border-bottom: 1px solid var(--gray-200);
131
+ min-height: 36.5px;
132
+ text-align: left;
133
+ display: flex;
134
+ flex-direction: column;
135
+ justify-content: center;
136
+ overflow: visible;
137
+ }
138
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-select,
139
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-multi-select,
140
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-tree-select {
141
+ margin-top: 4px;
142
+ width: 100%;
143
+ background-color: transparent;
144
+ }
145
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-select > .selected,
146
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-multi-select > .selected,
147
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-tree-select > .selected {
148
+ width: 100%;
149
+ border: 0;
150
+ height: 16px;
151
+ padding: 0;
152
+ background-color: transparent;
153
+ }
154
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-select > .bs-select-popup,
155
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-multi-select > .bs-select-popup,
156
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th > div .bs-tree-select > .bs-select-popup {
157
+ margin-top: 4px;
158
+ margin-left: -4px;
159
+ }
160
+ .bs-grid > .table-wrap > table > thead > tr.header-row > th.fixed {
161
+ z-index: 3;
162
+ }
163
+ .bs-grid > .table-wrap > table > tbody > tr > td.fixed {
164
+ position: sticky;
165
+ left: 0;
166
+ z-index: 2;
167
+ white-space: nowrap;
168
+ }
169
+ .bs-grid > .table-wrap > table > tbody > tr.data-row {
170
+ position: relative;
171
+ }
172
+ .bs-grid > .table-wrap > table > tbody > tr.data-row > td > div {
173
+ border-right: 1px solid transparent;
174
+ }
175
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) > td {
176
+ background-color: var(--grid-row-odd-color);
177
+ }
178
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(odd) > td > div {
179
+ border-color: var(--grid-row-odd-color);
180
+ }
181
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) > td {
182
+ background-color: var(--grid-row-even-color);
183
+ }
184
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:nth-child(even) > td > div {
185
+ border-color: var(--grid-row-even-color);
186
+ }
187
+ .bs-grid > .table-wrap > table > tbody > tr > td.func-cell {
188
+ line-height: 1;
189
+ }
190
+ .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.serial-no {
191
+ text-align: right;
192
+ }
193
+ .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox {
194
+ color: var(--color-text-light);
195
+ }
196
+ .bs-grid > .table-wrap > table > tbody > tr > td.func-cell.checkbox.checked {
197
+ color: var(--color-text);
198
+ }
199
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td {
200
+ background-color: var(--gray-200);
201
+ }
202
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td > div {
203
+ border-right-color: var(--gray-200);
204
+ }
205
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td:first-child > div {
206
+ border-right-color: var(--gray-200);
207
+ }
208
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > td:last-child > div {
209
+ border-right-color: var(--gray-200);
210
+ }
211
+ .bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td {
212
+ background-color: var(--primary-200);
213
+ }
214
+ .bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td > div {
215
+ border-right-color: var(--primary-200);
216
+ }
217
+ .bs-grid > .table-wrap > table > tbody > tr.data-row.selected:hover td:first-child > div {
218
+ border-right-color: var(--primary-200) !important;
219
+ }
220
+ .bs-grid > .table-wrap > table > tbody > tr.data-row.selected:hover td:last-child > div {
221
+ border-right-color: var(--primary-200) !important;
222
+ }
223
+ .bs-grid.h-scrolled .header-row .fixed:after,
224
+ .bs-grid.h-scrolled .data-row .fixed:after {
225
+ display: block;
226
+ position: absolute;
227
+ top: 0;
228
+ right: -8px;
229
+ width: 8px;
230
+ height: 100%;
231
+ content: "";
232
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
233
+ }
234
+ .bs-grid.v-scrolled .header-row > th > div {
235
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
236
+ }
237
+ [data-theme=dark] .bs-grid.h-scrolled .header-row .fixed:after,
238
+ [data-theme=dark] .bs-grid.h-scrolled .data-row .fixed:after {
239
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
240
+ }
241
+ [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
242
+ .bs-multi-select,
243
+ .bs-tree-select,
244
+ .bs-tree-multi-select):not(:has(.empty)) {
245
+ background-color: var(--primary-400);
246
+ color: var(--dark);
247
+ }
248
+ [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
249
+ .bs-multi-select,
250
+ .bs-tree-select,
251
+ .bs-tree-multi-select):not(:has(.empty)) .bs-select,
252
+ [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
253
+ .bs-multi-select,
254
+ .bs-tree-select,
255
+ .bs-tree-multi-select):not(:has(.empty)) .bs-multi-select,
256
+ [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
257
+ .bs-multi-select,
258
+ .bs-tree-select,
259
+ .bs-tree-multi-select):not(:has(.empty)) .bs-tree-select,
260
+ [data-theme=dark] .bs-grid > .table-wrap > table > thead > tr.header-row > th:has(.bs-select,
261
+ .bs-multi-select,
262
+ .bs-tree-select,
263
+ .bs-tree-multi-select):not(:has(.empty)) .bs-tree-multi-select {
264
+ color: var(--dark);
265
+ }
266
+ .bs-grid.with-border > .table-wrap > table > tbody > tr {
267
+ border-bottom: 1px solid var(--gray-200);
268
+ }
269
+ .bs-grid.with-border > .table-wrap > table > tbody > tr.data-row:nth-child(even):not(:hover) > td {
270
+ background-color: var(--grid-row-odd-color);
271
+ }
272
+ .bs-grid.with-border > .table-wrap > table > tbody > tr.data-row:nth-child(even):not(:hover) > td > div {
273
+ border-color: var(--grid-row-odd-color);
274
+ }
275
+ .bs-grid > .table-wrap > table > tbody > tr.data-row:hover > .bs-grid-merged-cell {
276
+ background-color: var(--grid-row-odd-color);
277
+ }.bs-grid-control {
278
+ display: flex;
279
+ align-items: center;
280
+ color: var(--gray);
281
+ }
282
+ .bs-grid-control > div {
283
+ padding-right: 8px;
284
+ }
285
+ .bs-grid-control .bs-select.page-length {
286
+ min-width: auto;
287
+ }
288
+ .bs-grid-control .bs-select.page-length .selected {
289
+ height: 18px;
290
+ border: 0;
291
+ padding: 0;
292
+ border-radius: 0;
293
+ }/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
294
+ .bs-text-filter {
295
+ flex-direction: column;
296
+ align-items: flex-start;
297
+ width: 300px;
298
+ min-width: 100px;
299
+ display: inline-flex;
300
+ position: relative;
301
+ }
302
+ .bs-text-filter .input-wrap {
303
+ border-radius: var(--radius-sm, .25rem);
304
+ border: 1px solid var(--border);
305
+ align-items: flex-start;
306
+ width: 100%;
307
+ display: flex;
308
+ }
309
+ .bs-text-filter .textarea-wrap {
310
+ border-radius: var(--radius-sm, .25rem);
311
+ border: 1px solid var(--border);
312
+ align-items: flex-start;
313
+ width: 100%;
314
+ height: 72px;
315
+ display: flex;
316
+ }
317
+ .bs-text-filter .textarea-wrap textarea {
318
+ resize: none;
319
+ }
320
+ .bs-text-filter .filter-caption {
321
+ margin-top: calc(var(--spacing, .25rem) * 2);
322
+ color: var(--gray-400);
323
+ font-size: .923em;
324
+ }
325
+ .bs-text-filter .filter-caption > span {
326
+ margin-right: calc(var(--spacing, .25rem) * 1);
327
+ }
328
+ .bs-text-filter .filter-caption > span:not(:last-child):after {
329
+ content: ",";
330
+ }
331
+ .bs-text-filter.modified .input-wrap, .bs-text-filter.modified .textarea-wrap {
332
+ border-color: var(--primary) !important;
333
+ }
334
+ .bs-text-filter.modified .input-wrap input, .bs-text-filter.modified .input-wrap textarea, .bs-text-filter.modified .textarea-wrap input, .bs-text-filter.modified .textarea-wrap textarea {
335
+ color: var(--primary) !important;
336
+ }
337
+ .bs-text-filter.error .input-wrap, .bs-text-filter.error .textarea-wrap {
338
+ border-color: var(--danger) !important;
339
+ }
340
+ .bs-text-filter.error .input-wrap input, .bs-text-filter.error .input-wrap textarea, .bs-text-filter.error .textarea-wrap input, .bs-text-filter.error .textarea-wrap textarea {
341
+ color: var(--danger) !important;
342
+ }
343
+ .date-filters .bs-clickable {
344
+ display: flex;
345
+ align-items: center;
346
+ justify-content: center;
347
+ min-width: 26px;
348
+ height: 26px;
349
+ border: 1px solid var(--border);
350
+ border-radius: 2px;
351
+ }
352
+ .date-filters .input-area .bs-clickable {
353
+ border: 0 none;
354
+ margin: 0;
355
+ }.bs-grid-lookup {
356
+ background-color: var(--body-bg);
357
+ line-height: 1;
358
+ }/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
359
+ .bs-date-range-filter .input-area {
360
+ border-radius: var(--radius-sm, .25rem);
361
+ width: 100%;
362
+ padding-right: calc(var(--spacing, .25rem) * 2);
363
+ border: 1px solid var(--border);
364
+ align-items: center;
365
+ display: flex;
366
+ }
367
+ .bs-date-range-filter .input-area .font-icon {
368
+ margin-inline: calc(var(--spacing, .25rem) * 1.5);
369
+ font-size: var(--text-sm, .875rem);
370
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
371
+ }
372
+ .bs-date-range-filter .input-area input {
373
+ padding-right: calc(var(--spacing, .25rem) * 0);
374
+ border-radius: 0;
375
+ width: 9em;
376
+ }