@vobs/table 1.2.1 → 1.3.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.
- package/dist/column-settings.cjs +119 -697
- package/dist/column-settings.cjs.map +1 -1
- package/dist/column-settings.js +70 -655
- package/dist/column-settings.js.map +1 -1
- package/dist/data-table.cjs +205 -1077
- package/dist/data-table.cjs.map +1 -1
- package/dist/data-table.js +126 -1005
- package/dist/data-table.js.map +1 -1
- package/dist/icons.cjs +31 -822
- package/dist/icons.cjs.map +1 -1
- package/dist/icons.js +5 -818
- package/dist/icons.js.map +1 -1
- package/dist/index.cjs +303 -1178
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +224 -1099
- package/dist/index.js.map +1 -1
- package/dist/persistence.cjs +30 -6
- package/dist/persistence.cjs.map +1 -1
- package/dist/persistence.js +5 -3
- package/dist/persistence.js.map +1 -1
- package/dist/types.cjs +18 -2
- package/dist/types.cjs.map +1 -1
- package/dist/types.js +0 -2
- package/dist/types.js.map +1 -1
- package/dist/utils.cjs +64 -388
- package/dist/utils.cjs.map +1 -1
- package/dist/utils.js +25 -365
- package/dist/utils.js.map +1 -1
- package/package.json +5 -5
package/dist/data-table.js
CHANGED
|
@@ -1,689 +1,28 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
3
|
|
|
4
|
-
// packages/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
function invokeDebug(name, ...args) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
__name(invokeDebug, "invokeDebug");
|
|
20
|
-
|
|
21
|
-
// packages/reactivity/src/owner.ts
|
|
22
|
-
var currentOwner = null;
|
|
23
|
-
var nextOwnerId = 1;
|
|
24
|
-
var ownerNames = /* @__PURE__ */ new WeakMap();
|
|
25
|
-
function createOwner() {
|
|
26
|
-
const parent = currentOwner;
|
|
27
|
-
let disposed = parent?.disposed ?? false;
|
|
28
|
-
const children = [];
|
|
29
|
-
const cleanups = [];
|
|
30
|
-
const errorHandlers = /* @__PURE__ */ new Set();
|
|
31
|
-
const owner = {
|
|
32
|
-
id: `owner-${nextOwnerId++}`,
|
|
33
|
-
parent,
|
|
34
|
-
children,
|
|
35
|
-
depth: (parent?.depth ?? -1) + 1,
|
|
36
|
-
get disposed() {
|
|
37
|
-
return disposed;
|
|
38
|
-
},
|
|
39
|
-
run(fn) {
|
|
40
|
-
if (disposed) throw new Error("Vobs: \u5DF2\u9500\u6BC1\u7684 Owner \u4E0D\u80FD\u7EE7\u7EED\u8FD0\u884C");
|
|
41
|
-
const previous = currentOwner;
|
|
42
|
-
currentOwner = owner;
|
|
43
|
-
try {
|
|
44
|
-
return fn();
|
|
45
|
-
} finally {
|
|
46
|
-
currentOwner = previous;
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
addCleanup(cleanup) {
|
|
50
|
-
if (disposed) {
|
|
51
|
-
cleanup();
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
cleanups.push(cleanup);
|
|
55
|
-
},
|
|
56
|
-
onDispose(cleanup) {
|
|
57
|
-
owner.addCleanup(cleanup);
|
|
58
|
-
},
|
|
59
|
-
onError(handler) {
|
|
60
|
-
errorHandlers.add(handler);
|
|
61
|
-
const remove = /* @__PURE__ */ __name(() => errorHandlers.delete(handler), "remove");
|
|
62
|
-
owner.addCleanup(remove);
|
|
63
|
-
return remove;
|
|
64
|
-
},
|
|
65
|
-
handleError(error) {
|
|
66
|
-
for (const handler of [...errorHandlers].reverse()) {
|
|
67
|
-
try {
|
|
68
|
-
handler(error);
|
|
69
|
-
return true;
|
|
70
|
-
} catch (handlerError) {
|
|
71
|
-
return parent?.handleError(handlerError) ?? false;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
return parent?.handleError(error) ?? false;
|
|
75
|
-
},
|
|
76
|
-
dispose() {
|
|
77
|
-
if (disposed) return;
|
|
78
|
-
disposed = true;
|
|
79
|
-
for (const child of [...children]) child.dispose();
|
|
80
|
-
children.length = 0;
|
|
81
|
-
let firstError;
|
|
82
|
-
for (let index = cleanups.length - 1; index >= 0; index--) {
|
|
83
|
-
try {
|
|
84
|
-
cleanups[index]();
|
|
85
|
-
} catch (error) {
|
|
86
|
-
firstError ?? (firstError = error);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
cleanups.length = 0;
|
|
90
|
-
if (parent) {
|
|
91
|
-
const index = parent.children.indexOf(owner);
|
|
92
|
-
if (index >= 0) parent.children.splice(index, 1);
|
|
93
|
-
}
|
|
94
|
-
if (firstError) throw firstError;
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
if (parent && !parent.disposed) parent.children.push(owner);
|
|
98
|
-
return owner;
|
|
99
|
-
}
|
|
100
|
-
__name(createOwner, "createOwner");
|
|
101
|
-
function setOwnerDebugName(owner, name) {
|
|
102
|
-
ownerNames.set(owner, name);
|
|
103
|
-
}
|
|
104
|
-
__name(setOwnerDebugName, "setOwnerDebugName");
|
|
105
|
-
function getCurrentOwner() {
|
|
106
|
-
return currentOwner;
|
|
107
|
-
}
|
|
108
|
-
__name(getCurrentOwner, "getCurrentOwner");
|
|
109
|
-
|
|
110
|
-
// packages/reactivity/src/signal.ts
|
|
111
|
-
var currentSubscriber = null;
|
|
112
|
-
function getCurrentSubscriber() {
|
|
113
|
-
return currentSubscriber;
|
|
114
|
-
}
|
|
115
|
-
__name(getCurrentSubscriber, "getCurrentSubscriber");
|
|
116
|
-
function setCurrentSubscriber(subscriber) {
|
|
117
|
-
currentSubscriber = subscriber;
|
|
118
|
-
}
|
|
119
|
-
__name(setCurrentSubscriber, "setCurrentSubscriber");
|
|
120
|
-
function trackDependency(dependency) {
|
|
121
|
-
if (!currentSubscriber || currentSubscriber.disposed) return;
|
|
122
|
-
!currentSubscriber.dependencies.has(dependency);
|
|
123
|
-
currentSubscriber.dependencies.add(dependency);
|
|
124
|
-
}
|
|
125
|
-
__name(trackDependency, "trackDependency");
|
|
126
|
-
function state(initialValue, debugName) {
|
|
127
|
-
let value = initialValue;
|
|
128
|
-
let disposed = false;
|
|
129
|
-
const subscribers = /* @__PURE__ */ new Set();
|
|
130
|
-
const signalInstance = {
|
|
131
|
-
get value() {
|
|
132
|
-
const subscriber = getCurrentSubscriber();
|
|
133
|
-
if (subscriber && !subscriber.disposed) {
|
|
134
|
-
subscribers.add(subscriber);
|
|
135
|
-
trackDependency(signalInstance);
|
|
136
|
-
}
|
|
137
|
-
return value;
|
|
138
|
-
},
|
|
139
|
-
set value(nextValue) {
|
|
140
|
-
if (disposed || Object.is(value, nextValue)) return;
|
|
141
|
-
value = nextValue;
|
|
142
|
-
for (const subscriber of [...subscribers]) subscriber.notify();
|
|
143
|
-
},
|
|
144
|
-
unsubscribe(subscriber) {
|
|
145
|
-
subscribers.delete(subscriber);
|
|
146
|
-
},
|
|
147
|
-
// 与 `.value =` 赋值同一条路径:判等短路、debug hook、notify 全部一致。
|
|
148
|
-
// 以闭包实现,可安全地作为回调直接传递(无 this 绑定问题)。
|
|
149
|
-
set(next) {
|
|
150
|
-
signalInstance.value = next;
|
|
151
|
-
},
|
|
152
|
-
dispose() {
|
|
153
|
-
if (disposed) return;
|
|
154
|
-
disposed = true;
|
|
155
|
-
subscribers.clear();
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
const owner = getCurrentOwner();
|
|
159
|
-
owner?.addCleanup(signalInstance.dispose);
|
|
160
|
-
if (debugName?.trim()) setSignalDebugName(signalInstance, debugName.trim());
|
|
161
|
-
return signalInstance;
|
|
162
|
-
}
|
|
163
|
-
__name(state, "state");
|
|
164
|
-
|
|
165
|
-
// packages/reactivity/src/scheduler.ts
|
|
166
|
-
var _Scheduler = class _Scheduler {
|
|
167
|
-
constructor() {
|
|
168
|
-
this.dirtyEffects = /* @__PURE__ */ new Set();
|
|
169
|
-
this.lowPriorityEffects = /* @__PURE__ */ new Set();
|
|
170
|
-
// flush 不可重入(flushing 标志保证),缓冲数组可在轮次间安全复用,避免每轮分配。
|
|
171
|
-
this.normalBuffer = [];
|
|
172
|
-
this.lowBuffer = [];
|
|
173
|
-
this.flushing = false;
|
|
174
|
-
this.scheduled = false;
|
|
175
|
-
this.batchDepth = 0;
|
|
176
|
-
}
|
|
177
|
-
schedule(effect2) {
|
|
178
|
-
if (effect2.disposed) return;
|
|
179
|
-
this.dirtyEffects.add(effect2);
|
|
180
|
-
this.lowPriorityEffects.delete(effect2);
|
|
181
|
-
this.ensureScheduled();
|
|
182
|
-
}
|
|
183
|
-
/** Queue an effect behind normal updates while preserving deterministic order. */
|
|
184
|
-
scheduleLow(effect2) {
|
|
185
|
-
if (effect2.disposed) return;
|
|
186
|
-
if (!this.dirtyEffects.has(effect2)) this.lowPriorityEffects.add(effect2);
|
|
187
|
-
this.ensureScheduled();
|
|
188
|
-
}
|
|
189
|
-
ensureScheduled() {
|
|
190
|
-
if (this.batchDepth === 0 && !this.flushing && !this.scheduled) {
|
|
191
|
-
this.scheduled = true;
|
|
192
|
-
queueMicrotask(() => {
|
|
193
|
-
this.scheduled = false;
|
|
194
|
-
this.flush();
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
remove(effect2) {
|
|
199
|
-
this.dirtyEffects.delete(effect2);
|
|
200
|
-
this.lowPriorityEffects.delete(effect2);
|
|
201
|
-
}
|
|
202
|
-
batch(fn) {
|
|
203
|
-
this.batchDepth++;
|
|
204
|
-
try {
|
|
205
|
-
return fn();
|
|
206
|
-
} finally {
|
|
207
|
-
this.batchDepth--;
|
|
208
|
-
if (this.batchDepth === 0) this.flush();
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
flush() {
|
|
212
|
-
if (this.flushing || this.batchDepth > 0) return;
|
|
213
|
-
this.flushing = true;
|
|
214
|
-
let rounds = 0;
|
|
215
|
-
let firstError;
|
|
216
|
-
let hasError = false;
|
|
217
|
-
try {
|
|
218
|
-
while (this.dirtyEffects.size > 0 || this.lowPriorityEffects.size > 0) {
|
|
219
|
-
if (++rounds > 100) {
|
|
220
|
-
this.dirtyEffects.clear();
|
|
221
|
-
this.lowPriorityEffects.clear();
|
|
222
|
-
throw new Error("Vobs: \u54CD\u5E94\u5F0F\u66F4\u65B0\u8D85\u8FC7 100 \u8F6E\uFF0C\u53EF\u80FD\u5B58\u5728\u5FAA\u73AF\u4F9D\u8D56");
|
|
223
|
-
}
|
|
224
|
-
this.collectRunnable(this.dirtyEffects, this.normalBuffer);
|
|
225
|
-
this.collectRunnable(this.lowPriorityEffects, this.lowBuffer);
|
|
226
|
-
sortEffects(this.normalBuffer);
|
|
227
|
-
sortEffects(this.lowBuffer);
|
|
228
|
-
for (const effect2 of this.normalBuffer) {
|
|
229
|
-
try {
|
|
230
|
-
effect2.run();
|
|
231
|
-
} catch (error) {
|
|
232
|
-
if (!hasError) {
|
|
233
|
-
firstError = error;
|
|
234
|
-
hasError = true;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
for (const effect2 of this.lowBuffer) {
|
|
239
|
-
try {
|
|
240
|
-
effect2.run();
|
|
241
|
-
} catch (error) {
|
|
242
|
-
if (!hasError) {
|
|
243
|
-
firstError = error;
|
|
244
|
-
hasError = true;
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
this.normalBuffer.length = 0;
|
|
249
|
-
this.lowBuffer.length = 0;
|
|
250
|
-
}
|
|
251
|
-
} finally {
|
|
252
|
-
this.normalBuffer.length = 0;
|
|
253
|
-
this.lowBuffer.length = 0;
|
|
254
|
-
this.flushing = false;
|
|
255
|
-
}
|
|
256
|
-
if (hasError) throw firstError;
|
|
257
|
-
}
|
|
258
|
-
/** 收集未 disposed 的 effect 并清空源集合;run() 期间新调度的 effect 留给下一轮。 */
|
|
259
|
-
collectRunnable(source, target) {
|
|
260
|
-
for (const effect2 of source) {
|
|
261
|
-
if (!effect2.disposed) target.push(effect2);
|
|
262
|
-
}
|
|
263
|
-
source.clear();
|
|
264
|
-
}
|
|
265
|
-
};
|
|
266
|
-
__name(_Scheduler, "Scheduler");
|
|
267
|
-
var Scheduler = _Scheduler;
|
|
268
|
-
function sortEffects(effects) {
|
|
269
|
-
if (effects.length > 1) {
|
|
270
|
-
effects.sort((a, b) => b.depth - a.depth || a.order - b.order);
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
__name(sortEffects, "sortEffects");
|
|
274
|
-
var scheduler = new Scheduler();
|
|
275
|
-
|
|
276
|
-
// packages/reactivity/src/effect.ts
|
|
277
|
-
var nextEffectOrder = 1;
|
|
278
|
-
function cleanupDependencies(subscriber) {
|
|
279
|
-
for (const dependency of subscriber.dependencies) {
|
|
280
|
-
dependency.unsubscribe(subscriber);
|
|
281
|
-
}
|
|
282
|
-
subscriber.dependencies.clear();
|
|
283
|
-
}
|
|
284
|
-
__name(cleanupDependencies, "cleanupDependencies");
|
|
285
|
-
function effect(callback) {
|
|
286
|
-
const owner = getCurrentOwner();
|
|
287
|
-
let cleanup;
|
|
288
|
-
let dirty = true;
|
|
289
|
-
let disposed = false;
|
|
290
|
-
const eff = {
|
|
291
|
-
order: nextEffectOrder++,
|
|
292
|
-
depth: owner?.depth ?? 0,
|
|
293
|
-
dependencies: /* @__PURE__ */ new Set(),
|
|
294
|
-
get disposed() {
|
|
295
|
-
return disposed;
|
|
296
|
-
},
|
|
297
|
-
notify() {
|
|
298
|
-
if (disposed || dirty) return;
|
|
299
|
-
dirty = true;
|
|
300
|
-
scheduler.schedule(eff);
|
|
301
|
-
},
|
|
302
|
-
run() {
|
|
303
|
-
if (disposed || !dirty) return;
|
|
304
|
-
dirty = false;
|
|
305
|
-
const previousCleanup = cleanup;
|
|
306
|
-
cleanup = void 0;
|
|
307
|
-
let cleanupError;
|
|
308
|
-
if (previousCleanup) {
|
|
309
|
-
try {
|
|
310
|
-
previousCleanup();
|
|
311
|
-
} catch (error) {
|
|
312
|
-
const handled2 = owner?.handleError(error) ?? false;
|
|
313
|
-
if (!handled2) cleanupError = error;
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
cleanupDependencies(eff);
|
|
317
|
-
const previous = getCurrentSubscriber();
|
|
318
|
-
setCurrentSubscriber(eff);
|
|
319
|
-
let thrown;
|
|
320
|
-
let handled = false;
|
|
321
|
-
try {
|
|
322
|
-
const result = owner ? owner.run(callback) : callback();
|
|
323
|
-
cleanup = typeof result === "function" ? result : void 0;
|
|
324
|
-
} catch (error) {
|
|
325
|
-
thrown = error;
|
|
326
|
-
handled = owner?.handleError(error) ?? false;
|
|
327
|
-
if (!handled) throw error;
|
|
328
|
-
} finally {
|
|
329
|
-
setCurrentSubscriber(previous);
|
|
330
|
-
}
|
|
331
|
-
if (cleanupError && !thrown) throw cleanupError;
|
|
332
|
-
},
|
|
333
|
-
scheduleLow() {
|
|
334
|
-
if (disposed || dirty) return;
|
|
335
|
-
dirty = true;
|
|
336
|
-
scheduler.scheduleLow(eff);
|
|
337
|
-
},
|
|
338
|
-
dispose() {
|
|
339
|
-
if (disposed) return;
|
|
340
|
-
disposed = true;
|
|
341
|
-
dirty = false;
|
|
342
|
-
scheduler.remove(eff);
|
|
343
|
-
const previousCleanup = cleanup;
|
|
344
|
-
cleanup = void 0;
|
|
345
|
-
let cleanupError;
|
|
346
|
-
if (previousCleanup) {
|
|
347
|
-
try {
|
|
348
|
-
previousCleanup();
|
|
349
|
-
} catch (error) {
|
|
350
|
-
const handled = owner?.handleError(error) ?? false;
|
|
351
|
-
if (!handled) cleanupError = error;
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
cleanupDependencies(eff);
|
|
355
|
-
if (cleanupError) throw cleanupError;
|
|
356
|
-
}
|
|
357
|
-
};
|
|
358
|
-
owner?.addCleanup(eff.dispose);
|
|
359
|
-
eff.run();
|
|
360
|
-
return eff;
|
|
361
|
-
}
|
|
362
|
-
__name(effect, "effect");
|
|
363
|
-
|
|
364
|
-
// packages/runtime/src/debug.ts
|
|
365
|
-
var activeRuntimeDebugHooks = null;
|
|
366
|
-
function getRuntimeDebugHooks() {
|
|
367
|
-
return activeRuntimeDebugHooks;
|
|
368
|
-
}
|
|
369
|
-
__name(getRuntimeDebugHooks, "getRuntimeDebugHooks");
|
|
370
|
-
function invokeRuntimeDebug(name, ...args) {
|
|
371
|
-
return;
|
|
372
|
-
}
|
|
373
|
-
__name(invokeRuntimeDebug, "invokeRuntimeDebug");
|
|
374
|
-
function readDebugValue(read) {
|
|
375
|
-
try {
|
|
376
|
-
return read();
|
|
377
|
-
} catch {
|
|
378
|
-
return "[Uninspectable]";
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
__name(readDebugValue, "readDebugValue");
|
|
382
|
-
function describeDebugNode(node) {
|
|
383
|
-
if (!node || typeof node !== "object") return "node";
|
|
384
|
-
const value = node;
|
|
385
|
-
const name = typeof value.tagName === "string" ? value.tagName.toLowerCase() : typeof value.nodeName === "string" ? value.nodeName.toLowerCase() : "node";
|
|
386
|
-
const id = typeof value.id === "string" && value.id ? `#${value.id}` : "";
|
|
387
|
-
const className = typeof value.className === "string" && value.className ? `.${value.className.trim().split(/\s+/).filter(Boolean).join(".")}` : "";
|
|
388
|
-
return `${name}${id}${className}`;
|
|
389
|
-
}
|
|
390
|
-
__name(describeDebugNode, "describeDebugNode");
|
|
391
|
-
|
|
392
|
-
// packages/runtime/src/hmr.ts
|
|
393
|
-
var globalTarget = globalThis;
|
|
394
|
-
var hmrGlobal = globalTarget.__VOBS_HMR__ ?? { modules: /* @__PURE__ */ new Map() };
|
|
395
|
-
globalTarget.__VOBS_HMR__ = hmrGlobal;
|
|
396
|
-
function registerHmrInstance(moduleId, instance) {
|
|
397
|
-
const instances = getModule(moduleId).instances;
|
|
398
|
-
instances.add(instance);
|
|
399
|
-
return () => instances.delete(instance);
|
|
400
|
-
}
|
|
401
|
-
__name(registerHmrInstance, "registerHmrInstance");
|
|
402
|
-
function markHmrInstanceMounted(node, parent) {
|
|
403
|
-
const instance = hmrInstances.get(node);
|
|
404
|
-
if (instance) instance.parent = parent;
|
|
405
|
-
}
|
|
406
|
-
__name(markHmrInstanceMounted, "markHmrInstanceMounted");
|
|
407
|
-
function getModule(moduleId) {
|
|
408
|
-
let module = hmrGlobal.modules.get(moduleId);
|
|
409
|
-
if (!module) {
|
|
410
|
-
module = { components: /* @__PURE__ */ new Map(), state: /* @__PURE__ */ new Map(), instances: /* @__PURE__ */ new Set() };
|
|
411
|
-
hmrGlobal.modules.set(moduleId, module);
|
|
412
|
-
}
|
|
413
|
-
return module;
|
|
414
|
-
}
|
|
415
|
-
__name(getModule, "getModule");
|
|
416
|
-
var hmrInstances = /* @__PURE__ */ new WeakMap();
|
|
417
|
-
function associateHmrInstance(node, instance) {
|
|
418
|
-
hmrInstances.set(node, instance);
|
|
419
|
-
}
|
|
420
|
-
__name(associateHmrInstance, "associateHmrInstance");
|
|
421
|
-
var nodeOwners = /* @__PURE__ */ new WeakMap();
|
|
422
|
-
var eventBindings = /* @__PURE__ */ new WeakMap();
|
|
423
|
-
function getRenderer() {
|
|
424
|
-
{
|
|
425
|
-
throw new Error("\u6E32\u67D3\u5668\u672A\u521D\u59CB\u5316");
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
__name(getRenderer, "getRenderer");
|
|
429
|
-
function createText(content) {
|
|
430
|
-
return getRenderer().createText(content);
|
|
431
|
-
}
|
|
432
|
-
__name(createText, "createText");
|
|
433
|
-
function createElement(tag) {
|
|
434
|
-
return getRenderer().createElement(tag);
|
|
435
|
-
}
|
|
436
|
-
__name(createElement, "createElement");
|
|
437
|
-
function createComment(content) {
|
|
438
|
-
return getRenderer().createComment(content);
|
|
439
|
-
}
|
|
440
|
-
__name(createComment, "createComment");
|
|
441
|
-
function insertBefore(parent, child, anchor) {
|
|
442
|
-
if (isVobsFragment(child)) {
|
|
443
|
-
child.mount(parent, isVobsFragment(anchor) ? anchor.start : anchor);
|
|
444
|
-
return;
|
|
445
|
-
}
|
|
446
|
-
getRenderer().insertBefore(parent, child, isVobsFragment(anchor) ? anchor.start : anchor);
|
|
447
|
-
markHmrInstanceMounted(child, parent);
|
|
448
|
-
}
|
|
449
|
-
__name(insertBefore, "insertBefore");
|
|
450
|
-
function removeChild(parent, child) {
|
|
451
|
-
disposeNodeOwner(child);
|
|
452
|
-
if (isVobsFragment(child)) {
|
|
453
|
-
child.unmount(parent);
|
|
454
|
-
return;
|
|
455
|
-
}
|
|
456
|
-
getRenderer().removeChild(parent, child);
|
|
457
|
-
}
|
|
458
|
-
__name(removeChild, "removeChild");
|
|
459
|
-
function setProperty(node, key, value) {
|
|
460
|
-
getRenderer().setProperty(node, key, value);
|
|
461
|
-
}
|
|
462
|
-
__name(setProperty, "setProperty");
|
|
463
|
-
function setAttribute(node, key, value) {
|
|
464
|
-
getRenderer().setAttribute(node, key, value);
|
|
465
|
-
}
|
|
466
|
-
__name(setAttribute, "setAttribute");
|
|
467
|
-
function addEventListener(node, event, handler) {
|
|
468
|
-
const renderer = getRenderer();
|
|
469
|
-
const owner = getCurrentOwner();
|
|
470
|
-
let bindings = eventBindings.get(node);
|
|
471
|
-
if (!bindings) {
|
|
472
|
-
bindings = /* @__PURE__ */ new Map();
|
|
473
|
-
eventBindings.set(node, bindings);
|
|
474
|
-
}
|
|
475
|
-
const previous = bindings.get(event);
|
|
476
|
-
if (previous && previous.original === handler && previous.owner === owner) return;
|
|
477
|
-
if (previous) renderer.removeEventListener(node, event, previous.handler);
|
|
478
|
-
const listener = owner ? (reason) => {
|
|
479
|
-
try {
|
|
480
|
-
owner.run(() => handler(reason));
|
|
481
|
-
} catch (error) {
|
|
482
|
-
const handled = owner.handleError(error);
|
|
483
|
-
invokeRuntimeDebug("error", {
|
|
484
|
-
error,
|
|
485
|
-
owner,
|
|
486
|
-
phase: "event",
|
|
487
|
-
handled,
|
|
488
|
-
recovery: handled ? "handled" : "propagated"
|
|
489
|
-
});
|
|
490
|
-
if (!handled) throw error;
|
|
491
|
-
}
|
|
492
|
-
} : handler;
|
|
493
|
-
const binding = { handler: listener, owner, original: handler };
|
|
494
|
-
bindings.set(event, binding);
|
|
495
|
-
renderer.addEventListener(node, event, listener);
|
|
496
|
-
owner?.onDispose(() => {
|
|
497
|
-
if (bindings?.get(event) !== binding) return;
|
|
498
|
-
bindings.delete(event);
|
|
499
|
-
renderer.removeEventListener(node, event, listener);
|
|
500
|
-
});
|
|
501
|
-
}
|
|
502
|
-
__name(addEventListener, "addEventListener");
|
|
503
|
-
function createComponent(component, props, source) {
|
|
504
|
-
const owner = createOwner();
|
|
505
|
-
const componentName = component.displayName || component.name || "anonymous";
|
|
506
|
-
setOwnerDebugName(owner, source ? `${componentName} (${source.file}:${source.line}:${source.column})` : componentName);
|
|
507
|
-
owner.onError((reason) => {
|
|
508
|
-
attachSourceLocation(reason, source);
|
|
509
|
-
attachComponentContext(reason, componentName, owner.id);
|
|
510
|
-
throw reason;
|
|
511
|
-
});
|
|
512
|
-
let node;
|
|
513
|
-
try {
|
|
514
|
-
node = owner.run(() => component(props));
|
|
515
|
-
} catch (error) {
|
|
516
|
-
owner.dispose();
|
|
517
|
-
attachSourceLocation(error, source);
|
|
518
|
-
attachComponentContext(error, componentName, owner.id);
|
|
519
|
-
throw error;
|
|
520
|
-
}
|
|
521
|
-
associateNodeOwner(node, owner);
|
|
522
|
-
const hmrKey = component.hmrKey;
|
|
523
|
-
if (hmrKey) {
|
|
524
|
-
const instance = {
|
|
525
|
-
node,
|
|
526
|
-
parent: null,
|
|
527
|
-
refresh() {
|
|
528
|
-
const previous = instance.node;
|
|
529
|
-
const next = owner.run(() => component(props));
|
|
530
|
-
if (instance.parent && !isVobsFragment(previous) && !isVobsFragment(next)) {
|
|
531
|
-
getRenderer().insertBefore(instance.parent, next, previous);
|
|
532
|
-
getRenderer().removeChild(instance.parent, previous);
|
|
533
|
-
}
|
|
534
|
-
nodeOwners.delete(previous);
|
|
535
|
-
nodeOwners.set(next, owner);
|
|
536
|
-
associateHmrInstance(next, instance);
|
|
537
|
-
instance.node = next;
|
|
538
|
-
}
|
|
539
|
-
};
|
|
540
|
-
associateHmrInstance(node, instance);
|
|
541
|
-
const separator = hmrKey.lastIndexOf(":");
|
|
542
|
-
const moduleId = separator < 0 ? hmrKey : hmrKey.slice(0, separator);
|
|
543
|
-
const cleanup = registerHmrInstance(moduleId, instance);
|
|
544
|
-
owner.onDispose(cleanup);
|
|
545
|
-
}
|
|
546
|
-
return node;
|
|
547
|
-
}
|
|
548
|
-
__name(createComponent, "createComponent");
|
|
549
|
-
function attachSourceLocation(reason, source) {
|
|
550
|
-
if (!source || (!reason || typeof reason !== "object" && typeof reason !== "function")) return;
|
|
551
|
-
const error = reason;
|
|
552
|
-
if (error.vobsSource) return;
|
|
553
|
-
try {
|
|
554
|
-
Object.defineProperty(error, "vobsSource", {
|
|
555
|
-
configurable: true,
|
|
556
|
-
enumerable: false,
|
|
557
|
-
value: source,
|
|
558
|
-
writable: false
|
|
559
|
-
});
|
|
560
|
-
} catch {
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
__name(attachSourceLocation, "attachSourceLocation");
|
|
564
|
-
function attachComponentContext(reason, component, ownerId) {
|
|
565
|
-
if (!reason || typeof reason !== "object" && typeof reason !== "function") return;
|
|
566
|
-
const error = reason;
|
|
567
|
-
try {
|
|
568
|
-
if (!error.vobsComponent) Object.defineProperty(error, "vobsComponent", { configurable: true, enumerable: false, value: component, writable: false });
|
|
569
|
-
if (!error.vobsOwnerId) Object.defineProperty(error, "vobsOwnerId", { configurable: true, enumerable: false, value: ownerId, writable: false });
|
|
570
|
-
} catch {
|
|
571
|
-
}
|
|
572
|
-
}
|
|
573
|
-
__name(attachComponentContext, "attachComponentContext");
|
|
574
|
-
function createBlock(factory) {
|
|
575
|
-
const owner = createOwner();
|
|
576
|
-
setOwnerDebugName(owner, "dynamic");
|
|
577
|
-
let node;
|
|
578
|
-
try {
|
|
579
|
-
node = owner.run(factory);
|
|
580
|
-
} catch (error) {
|
|
581
|
-
owner.dispose();
|
|
582
|
-
throw error;
|
|
583
|
-
}
|
|
584
|
-
if (!node) {
|
|
585
|
-
owner.dispose();
|
|
586
|
-
return null;
|
|
587
|
-
}
|
|
588
|
-
associateNodeOwner(node, owner);
|
|
589
|
-
return node;
|
|
590
|
-
}
|
|
591
|
-
__name(createBlock, "createBlock");
|
|
592
|
-
function associateNodeOwner(node, owner) {
|
|
593
|
-
nodeOwners.set(node, owner);
|
|
594
|
-
}
|
|
595
|
-
__name(associateNodeOwner, "associateNodeOwner");
|
|
596
|
-
function disposeNodeOwner(node) {
|
|
597
|
-
const owner = nodeOwners.get(node);
|
|
598
|
-
if (!owner) return;
|
|
599
|
-
nodeOwners.delete(node);
|
|
600
|
-
owner.dispose();
|
|
601
|
-
}
|
|
602
|
-
__name(disposeNodeOwner, "disposeNodeOwner");
|
|
603
|
-
|
|
604
|
-
// packages/runtime/src/fragment.ts
|
|
605
|
-
function createFragment(factory) {
|
|
606
|
-
const start = createComment("vobs:fragment:start");
|
|
607
|
-
const end = createComment("vobs:fragment:end");
|
|
608
|
-
let parent = null;
|
|
609
|
-
let initialized = false;
|
|
610
|
-
const owner = getCurrentOwner();
|
|
611
|
-
const fragment = {
|
|
612
|
-
kind: "vobs-fragment",
|
|
613
|
-
start,
|
|
614
|
-
end,
|
|
615
|
-
mount(nextParent, anchor) {
|
|
616
|
-
if (parent && parent !== nextParent) {
|
|
617
|
-
throw new Error("Vobs Fragment: \u4E0D\u80FD\u8DE8\u7236\u8282\u70B9\u79FB\u52A8 Fragment");
|
|
618
|
-
}
|
|
619
|
-
if (initialized) {
|
|
620
|
-
moveRange(nextParent, start, end, anchor);
|
|
621
|
-
return;
|
|
622
|
-
}
|
|
623
|
-
const renderer = getRenderer();
|
|
624
|
-
renderer.insertBefore(nextParent, start, anchor);
|
|
625
|
-
renderer.insertBefore(nextParent, end, anchor);
|
|
626
|
-
parent = nextParent;
|
|
627
|
-
initialized = true;
|
|
628
|
-
if (owner) owner.run(() => factory(nextParent, end));
|
|
629
|
-
else factory(nextParent, end);
|
|
630
|
-
},
|
|
631
|
-
unmount(nextParent) {
|
|
632
|
-
if (!initialized || parent !== nextParent) {
|
|
633
|
-
throw new Error("Vobs Fragment: Fragment \u4E0D\u5C5E\u4E8E\u6307\u5B9A\u7236\u8282\u70B9");
|
|
634
|
-
}
|
|
635
|
-
const renderer = getRenderer();
|
|
636
|
-
let current = renderer.nextSibling(start);
|
|
637
|
-
while (current && current !== end) {
|
|
638
|
-
const next = renderer.nextSibling(current);
|
|
639
|
-
renderer.removeChild(nextParent, current);
|
|
640
|
-
current = next;
|
|
641
|
-
}
|
|
642
|
-
renderer.removeChild(nextParent, start);
|
|
643
|
-
renderer.removeChild(nextParent, end);
|
|
644
|
-
parent = null;
|
|
645
|
-
initialized = false;
|
|
646
|
-
}
|
|
647
|
-
};
|
|
648
|
-
return fragment;
|
|
649
|
-
}
|
|
650
|
-
__name(createFragment, "createFragment");
|
|
651
|
-
function isVobsFragment(value) {
|
|
652
|
-
return Boolean(value) && typeof value === "object" && value.kind === "vobs-fragment";
|
|
653
|
-
}
|
|
654
|
-
__name(isVobsFragment, "isVobsFragment");
|
|
655
|
-
function moveRange(parent, start, end, anchor) {
|
|
656
|
-
const renderer = getRenderer();
|
|
657
|
-
const nodes = [start];
|
|
658
|
-
let current = renderer.nextSibling(start);
|
|
659
|
-
while (current) {
|
|
660
|
-
nodes.push(current);
|
|
661
|
-
if (current === end) break;
|
|
662
|
-
current = renderer.nextSibling(current);
|
|
663
|
-
}
|
|
664
|
-
if (nodes[nodes.length - 1] !== end) {
|
|
665
|
-
throw new Error("Vobs Fragment: \u627E\u4E0D\u5230\u7ED3\u675F\u951A\u70B9");
|
|
666
|
-
}
|
|
667
|
-
for (const node of nodes) renderer.insertBefore(parent, node, anchor);
|
|
668
|
-
}
|
|
669
|
-
__name(moveRange, "moveRange");
|
|
670
|
-
|
|
671
|
-
// packages/runtime/src/dynamic.ts
|
|
672
|
-
function insertDynamic(parent, anchor, factory) {
|
|
673
|
-
const marker = createComment("vobs:dynamic");
|
|
674
|
-
insertBefore(parent, marker, anchor);
|
|
675
|
-
let current = null;
|
|
676
|
-
effect(() => {
|
|
677
|
-
const next = createBlock(factory);
|
|
678
|
-
if (next === current) return;
|
|
679
|
-
if (current) removeChild(parent, current);
|
|
680
|
-
current = next;
|
|
681
|
-
if (current) insertBefore(parent, current, marker);
|
|
682
|
-
});
|
|
683
|
-
}
|
|
684
|
-
__name(insertDynamic, "insertDynamic");
|
|
4
|
+
// packages/table/src/data-table.ts
|
|
5
|
+
import { effect as effect2, state } from "@vobs/reactivity";
|
|
6
|
+
import {
|
|
7
|
+
addEventListener,
|
|
8
|
+
createElement,
|
|
9
|
+
createFragment as createFragment2,
|
|
10
|
+
createText as createText2,
|
|
11
|
+
insertBefore as insertBefore2,
|
|
12
|
+
insertDynamic,
|
|
13
|
+
setAttribute as setAttribute2,
|
|
14
|
+
setProperty
|
|
15
|
+
} from "@vobs/vobs";
|
|
685
16
|
|
|
686
17
|
// packages/table/src/utils.ts
|
|
18
|
+
import { effect } from "@vobs/reactivity";
|
|
19
|
+
import {
|
|
20
|
+
createFragment,
|
|
21
|
+
createText,
|
|
22
|
+
insertBefore,
|
|
23
|
+
setAttribute,
|
|
24
|
+
setTextContent
|
|
25
|
+
} from "@vobs/vobs";
|
|
687
26
|
function readProp(props, name, fallback) {
|
|
688
27
|
const value = Reflect.get(props, name);
|
|
689
28
|
return value === void 0 ? fallback : value;
|
|
@@ -824,227 +163,9 @@ function removeAttribute(node, name) {
|
|
|
824
163
|
}
|
|
825
164
|
__name(removeAttribute, "removeAttribute");
|
|
826
165
|
|
|
827
|
-
// packages/ui/src/utils.ts
|
|
828
|
-
function readProp2(props, name, fallback) {
|
|
829
|
-
const value = Reflect.get(props, name);
|
|
830
|
-
return value === void 0 ? fallback : value;
|
|
831
|
-
}
|
|
832
|
-
__name(readProp2, "readProp");
|
|
833
|
-
function hasProp2(props, name) {
|
|
834
|
-
return name in props;
|
|
835
|
-
}
|
|
836
|
-
__name(hasProp2, "hasProp");
|
|
837
|
-
function mountSlot(parent, props, propName) {
|
|
838
|
-
insertDynamic(parent, null, () => resolveSlot2(Reflect.get(props, propName)));
|
|
839
|
-
}
|
|
840
|
-
__name(mountSlot, "mountSlot");
|
|
841
|
-
function resolveSlot2(value) {
|
|
842
|
-
const resolved = typeof value === "function" ? value() : value;
|
|
843
|
-
if (resolved === void 0 || resolved === null || resolved === false) return null;
|
|
844
|
-
if (typeof resolved === "string" || typeof resolved === "number") return createText(String(resolved));
|
|
845
|
-
if (Array.isArray(resolved)) {
|
|
846
|
-
const children = resolved;
|
|
847
|
-
return createFragment((parent, anchor) => {
|
|
848
|
-
for (const child of children) {
|
|
849
|
-
const node = resolveSlot2(child);
|
|
850
|
-
if (node) insertBefore(parent, node, anchor);
|
|
851
|
-
}
|
|
852
|
-
});
|
|
853
|
-
}
|
|
854
|
-
return resolved;
|
|
855
|
-
}
|
|
856
|
-
__name(resolveSlot2, "resolveSlot");
|
|
857
|
-
|
|
858
|
-
// packages/icon-core/src/index.ts
|
|
859
|
-
function createSvgIconNode(source, props = {}, options = {}) {
|
|
860
|
-
const root = createElement("span");
|
|
861
|
-
effect(() => {
|
|
862
|
-
updateSvgIconNode(root, typeof source === "function" ? source() : source, props, options);
|
|
863
|
-
});
|
|
864
|
-
return root;
|
|
865
|
-
}
|
|
866
|
-
__name(createSvgIconNode, "createSvgIconNode");
|
|
867
|
-
function updateSvgIconNode(root, definition, props, options) {
|
|
868
|
-
const size = readProp3(props, "size", void 0);
|
|
869
|
-
const width = readProp3(props, "width", size);
|
|
870
|
-
const height = readProp3(props, "height", size);
|
|
871
|
-
const normalizedWidth = normalizeSvgLength(width);
|
|
872
|
-
const normalizedHeight = normalizeSvgLength(height);
|
|
873
|
-
const userClass = [
|
|
874
|
-
readProp3(props, "class", void 0),
|
|
875
|
-
readProp3(props, "className", void 0)
|
|
876
|
-
].filter(hasText).join(" ");
|
|
877
|
-
const className = [options.class, options.className, userClass].filter(hasText).join(" ");
|
|
878
|
-
setAttribute(root, "class", className);
|
|
879
|
-
const internalStyle = size === void 0 ? "" : `width: ${normalizeCssLength(size)}; height: ${normalizeCssLength(size)}`;
|
|
880
|
-
const userStyle = readProp3(props, "style", void 0);
|
|
881
|
-
const style = [internalStyle, userStyle].filter(hasText).join("; ");
|
|
882
|
-
setOptionalAttribute2(root, "style", style || void 0);
|
|
883
|
-
const managedAttributes = /* @__PURE__ */ new Map();
|
|
884
|
-
for (const name of Object.keys(props)) {
|
|
885
|
-
if (name === "class" || name === "className" || name === "style" || name === "children") continue;
|
|
886
|
-
if (!name.startsWith("aria-") && !name.startsWith("data-") && !["id", "title", "role", "tabIndex"].includes(name)) continue;
|
|
887
|
-
const value = Reflect.get(props, name);
|
|
888
|
-
if (value === void 0 || value === null || value === false) continue;
|
|
889
|
-
managedAttributes.set(name === "tabIndex" ? "tabindex" : name, String(value));
|
|
890
|
-
}
|
|
891
|
-
for (const [name, value] of managedAttributes) setAttribute(root, name, value);
|
|
892
|
-
clearStaleAttributes(root, managedAttributes);
|
|
893
|
-
const title = readProp3(props, "title", void 0);
|
|
894
|
-
const ariaLabel = Reflect.get(props, "aria-label");
|
|
895
|
-
const decorative = readProp3(props, "decorative", title === void 0 && ariaLabel === void 0);
|
|
896
|
-
setOptionalAttribute2(root, "aria-hidden", decorative ? "true" : void 0);
|
|
897
|
-
setOptionalAttribute2(root, "aria-label", ariaLabel === void 0 ? title : void 0);
|
|
898
|
-
setOptionalAttribute2(root, "data-icon-name", options.dataIconName ?? definition?.name);
|
|
899
|
-
setOptionalAttribute2(root, "color", readProp3(props, "color", void 0));
|
|
900
|
-
if (!definition) {
|
|
901
|
-
setProperty(root, "innerHTML", "");
|
|
902
|
-
return;
|
|
903
|
-
}
|
|
904
|
-
const svgAttributes = {
|
|
905
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
906
|
-
viewBox: definition.viewBox ?? "0 0 24 24",
|
|
907
|
-
...options.defaultSvgAttributes,
|
|
908
|
-
...definition.attributes,
|
|
909
|
-
...normalizedWidth === void 0 ? {} : { width: normalizedWidth },
|
|
910
|
-
...normalizedHeight === void 0 ? {} : { height: normalizedHeight },
|
|
911
|
-
...readProp3(props, "color", void 0) === void 0 ? {} : { color: readProp3(props, "color", void 0) },
|
|
912
|
-
...readProp3(props, "stroke", void 0) === void 0 ? {} : { stroke: readProp3(props, "stroke", void 0) },
|
|
913
|
-
...readProp3(props, "fill", void 0) === void 0 ? {} : { fill: readProp3(props, "fill", void 0) },
|
|
914
|
-
...readProp3(props, "strokeWidth", void 0) === void 0 ? {} : { "stroke-width": readProp3(props, "strokeWidth", void 0) }
|
|
915
|
-
};
|
|
916
|
-
const markup = Object.entries(svgAttributes).filter(([, value]) => value !== void 0).map(([name, value]) => `${name}="${escapeXml(String(value))}"`).join(" ");
|
|
917
|
-
const titleMarkup = title === void 0 ? "" : `<title>${escapeXml(title)}</title>`;
|
|
918
|
-
setProperty(root, "innerHTML", `<svg ${markup} aria-hidden="true">${titleMarkup}${definition.body}</svg>`);
|
|
919
|
-
}
|
|
920
|
-
__name(updateSvgIconNode, "updateSvgIconNode");
|
|
921
|
-
function readProp3(props, name, fallback) {
|
|
922
|
-
const value = Reflect.get(props, name);
|
|
923
|
-
return value === void 0 ? fallback : value;
|
|
924
|
-
}
|
|
925
|
-
__name(readProp3, "readProp");
|
|
926
|
-
function hasText(value) {
|
|
927
|
-
return value !== void 0 && value.trim() !== "";
|
|
928
|
-
}
|
|
929
|
-
__name(hasText, "hasText");
|
|
930
|
-
function normalizeSvgLength(value) {
|
|
931
|
-
if (value === void 0) return void 0;
|
|
932
|
-
return typeof value === "number" ? String(value) : value;
|
|
933
|
-
}
|
|
934
|
-
__name(normalizeSvgLength, "normalizeSvgLength");
|
|
935
|
-
function normalizeCssLength(value) {
|
|
936
|
-
return typeof value === "number" || /^\d+(?:\.\d+)?$/u.test(value) ? `${value}px` : value;
|
|
937
|
-
}
|
|
938
|
-
__name(normalizeCssLength, "normalizeCssLength");
|
|
939
|
-
function setOptionalAttribute2(node, name, value) {
|
|
940
|
-
if (value === void 0 || value === null || value === false || value === "") {
|
|
941
|
-
node.removeAttribute(name);
|
|
942
|
-
return;
|
|
943
|
-
}
|
|
944
|
-
setAttribute(node, name, String(value));
|
|
945
|
-
}
|
|
946
|
-
__name(setOptionalAttribute2, "setOptionalAttribute");
|
|
947
|
-
function clearStaleAttributes(node, next) {
|
|
948
|
-
const previous = node.__vobsIconAttributes ?? /* @__PURE__ */ new Set();
|
|
949
|
-
for (const name of previous) {
|
|
950
|
-
if (!next.has(name)) node.removeAttribute(name);
|
|
951
|
-
}
|
|
952
|
-
node.__vobsIconAttributes = new Set(next.keys());
|
|
953
|
-
}
|
|
954
|
-
__name(clearStaleAttributes, "clearStaleAttributes");
|
|
955
|
-
function escapeXml(value) {
|
|
956
|
-
return value.replace(/&/gu, "&").replace(/</gu, "<").replace(/>/gu, ">").replace(/"/gu, """);
|
|
957
|
-
}
|
|
958
|
-
__name(escapeXml, "escapeXml");
|
|
959
|
-
|
|
960
|
-
// packages/ui/src/icon.ts
|
|
961
|
-
function Icon(props = {}) {
|
|
962
|
-
const root = createSvgIconNode(() => {
|
|
963
|
-
const definition = resolveIcon(
|
|
964
|
-
readProp2(props, "icon", void 0) ?? readProp2(props, "name", void 0)
|
|
965
|
-
);
|
|
966
|
-
if (!definition) {
|
|
967
|
-
if (hasProp2(props, "children")) return void 0;
|
|
968
|
-
throw new Error("Vobs UI: Icon requires a registered `name` or an `icon` definition");
|
|
969
|
-
}
|
|
970
|
-
return iconDefinitionToSvg(definition);
|
|
971
|
-
}, props, {
|
|
972
|
-
class: "vui-icon icon",
|
|
973
|
-
defaultSvgAttributes: {
|
|
974
|
-
fill: "none",
|
|
975
|
-
stroke: "currentColor",
|
|
976
|
-
"stroke-width": 2,
|
|
977
|
-
"stroke-linecap": "butt",
|
|
978
|
-
"stroke-linejoin": "miter"
|
|
979
|
-
}
|
|
980
|
-
});
|
|
981
|
-
if (hasProp2(props, "children")) mountSlot(root, props, "children");
|
|
982
|
-
return root;
|
|
983
|
-
}
|
|
984
|
-
__name(Icon, "Icon");
|
|
985
|
-
function iconDefinitionToSvg(definition) {
|
|
986
|
-
return {
|
|
987
|
-
name: definition.name,
|
|
988
|
-
body: definition.path,
|
|
989
|
-
viewBox: definition.viewBox
|
|
990
|
-
};
|
|
991
|
-
}
|
|
992
|
-
__name(iconDefinitionToSvg, "iconDefinitionToSvg");
|
|
993
|
-
var VUI_ICON_PATHS = {
|
|
994
|
-
search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
|
|
995
|
-
check: '<polyline points="4 12 10 18 20 6"/>',
|
|
996
|
-
x: '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
|
|
997
|
-
plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
|
|
998
|
-
minus: '<line x1="5" y1="12" x2="19" y2="12"/>',
|
|
999
|
-
"chevron-right": '<polyline points="9 6 15 12 9 18"/>',
|
|
1000
|
-
"chevron-down": '<polyline points="6 9 12 15 18 9"/>',
|
|
1001
|
-
"chevron-up": '<polyline points="6 15 12 9 18 15"/>',
|
|
1002
|
-
"chevron-left": '<polyline points="15 6 9 12 15 18"/>',
|
|
1003
|
-
"arrow-left": '<line x1="20" y1="12" x2="4" y2="12"/><polyline points="10 6 4 12 10 18"/>',
|
|
1004
|
-
"arrow-right": '<line x1="4" y1="12" x2="20" y2="12"/><polyline points="14 6 20 12 14 18"/>',
|
|
1005
|
-
"arrow-up": '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/>',
|
|
1006
|
-
"arrow-down": '<line x1="12" y1="4" x2="12" y2="20"/><polyline points="6 14 12 20 18 14"/>',
|
|
1007
|
-
atom: '<circle cx="12" cy="12" r="2"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>',
|
|
1008
|
-
globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>',
|
|
1009
|
-
"arrow-expand": '<polyline points="14 4 20 4 20 10"/><line x1="14" y1="10" x2="20" y2="4"/><polyline points="10 20 4 20 4 14"/><line x1="10" y1="14" x2="4" y2="20"/>',
|
|
1010
|
-
"arrow-minimize": '<polyline points="20 4 14 10 20 10"/><line x1="14" y1="10" x2="14" y2="4"/><polyline points="4 20 10 14 4 14"/><line x1="10" y1="14" x2="10" y2="20"/>',
|
|
1011
|
-
"check-circle": '<circle cx="12" cy="12" r="9"/><polyline points="8 12 11 15 16 9"/>',
|
|
1012
|
-
"alert-circle": '<circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16.01"/>',
|
|
1013
|
-
"alert-triangle": '<path d="M12 3 22 20 2 20 Z"/><line x1="12" y1="10" x2="12" y2="15"/><line x1="12" y1="18" x2="12" y2="18.01"/>',
|
|
1014
|
-
info: '<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12" y2="8.01"/>',
|
|
1015
|
-
home: '<polygon points="3 11 12 3 21 11 21 21 14 21 14 14 10 14 10 21 3 21 3 11"/>',
|
|
1016
|
-
user: '<path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/><circle cx="12" cy="8" r="4"/>',
|
|
1017
|
-
settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
|
|
1018
|
-
menu: '<line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>',
|
|
1019
|
-
"more-h": '<circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/>',
|
|
1020
|
-
calendar: '<rect x="3" y="5" width="18" height="16"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/>',
|
|
1021
|
-
filter: '<polygon points="3 4 21 4 14 12 14 20 10 18 10 12 3 4"/>',
|
|
1022
|
-
sort: '<path d="M8 20V4"/><polyline points="4 8 8 4 12 8"/><path d="M16 4v16"/><polyline points="12 16 16 20 20 16"/>',
|
|
1023
|
-
edit: '<path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/>',
|
|
1024
|
-
trash: '<polyline points="4 6 20 6"/><path d="M6 6v14h12V6"/><path d="M9 6V4h6v2"/><line x1="10" y1="10" x2="10" y2="17"/><line x1="14" y1="10" x2="14" y2="17"/>',
|
|
1025
|
-
download: '<path d="M12 3v12"/><polyline points="7 10 12 15 17 10"/><line x1="3" y1="21" x2="21" y2="21"/>',
|
|
1026
|
-
upload: '<path d="M12 21V6"/><polyline points="7 11 12 6 17 11"/><line x1="3" y1="21" x2="21" y2="21"/>',
|
|
1027
|
-
pause: '<line x1="9" y1="5" x2="9" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/>',
|
|
1028
|
-
play: '<polygon points="8 5 19 12 8 19 8 5"/>',
|
|
1029
|
-
refresh: '<polyline points="21 4 21 10 15 10"/><polyline points="3 20 3 14 9 14"/><path d="M20.5 9A9 9 0 0 0 5 5.5L3 7M3.5 15A9 9 0 0 0 19 18.5L21 17"/>',
|
|
1030
|
-
bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21a2 2 0 0 0 4 0"/>',
|
|
1031
|
-
folder: '<path d="M3 6h6l2 3h10v10H3z"/>',
|
|
1032
|
-
code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
|
|
1033
|
-
sparkles: '<path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z"/><path d="M19 14l1 2.2 2.2 1-2.2 1L19 20.4l-1-2.2-2.2-1 2.2-1L19 14z"/>',
|
|
1034
|
-
zap: '<polygon points="13 2 4 14 12 14 11 22 20 10 12 10 13 2"/>',
|
|
1035
|
-
sun: '<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.6" y1="4.6" x2="6.7" y2="6.7"/><line x1="17.3" y1="17.3" x2="19.4" y2="19.4"/><line x1="4.6" y1="19.4" x2="6.7" y2="17.3"/><line x1="17.3" y1="6.7" x2="19.4" y2="4.6"/>',
|
|
1036
|
-
moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
|
|
1037
|
-
terminal: '<polyline points="4 7 9 12 4 17"/><line x1="12" y1="17" x2="20" y2="17"/>'
|
|
1038
|
-
};
|
|
1039
|
-
var iconRegistry = new Map(
|
|
1040
|
-
Object.entries(VUI_ICON_PATHS).map(([name, path]) => [name, { name, path }])
|
|
1041
|
-
);
|
|
1042
|
-
function resolveIcon(icon) {
|
|
1043
|
-
return typeof icon === "string" ? iconRegistry.get(icon) : icon;
|
|
1044
|
-
}
|
|
1045
|
-
__name(resolveIcon, "resolveIcon");
|
|
1046
|
-
|
|
1047
166
|
// packages/table/src/icons.ts
|
|
167
|
+
import { createComponent } from "@vobs/vobs";
|
|
168
|
+
import { Icon } from "@vobs/ui";
|
|
1048
169
|
function defaultIcons() {
|
|
1049
170
|
return {
|
|
1050
171
|
ascending: /* @__PURE__ */ __name(() => createComponent(Icon, { name: "chevron-up" }), "ascending"),
|
|
@@ -1121,52 +242,52 @@ function KitDataTable(props = {}) {
|
|
|
1121
242
|
"onVisibleColumnIdsChange"
|
|
1122
243
|
]);
|
|
1123
244
|
bindStyle(root, props);
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
245
|
+
setAttribute2(toolbar, "class", "vobs-data-table__toolbar");
|
|
246
|
+
setAttribute2(viewport, "class", "vobs-data-table__viewport");
|
|
247
|
+
setAttribute2(viewport, "data-vobs-scrollable", "true");
|
|
248
|
+
setAttribute2(table, "class", "vobs-data-table__table");
|
|
249
|
+
setAttribute2(footer, "class", "vobs-data-table__footer");
|
|
1129
250
|
if (hasProp(props, "toolbar")) insertDynamic(toolbar, null, () => resolveSlot(readProp(props, "toolbar", void 0)));
|
|
1130
|
-
|
|
251
|
+
effect2(() => {
|
|
1131
252
|
setProperty(toolbar, "hidden", !hasProp(props, "toolbar"));
|
|
1132
253
|
});
|
|
1133
|
-
|
|
254
|
+
effect2(() => {
|
|
1134
255
|
const virtual = readProp(props, "virtual", false);
|
|
1135
256
|
setProperty(viewport, "tabIndex", virtual ? 0 : -1);
|
|
1136
|
-
|
|
257
|
+
setAttribute2(viewport, "style", virtual ? `max-height: ${normalizeHeight(readProp(props, "virtualHeight", DEFAULT_VIRTUAL_HEIGHT))}; overflow: auto` : "");
|
|
1137
258
|
});
|
|
1138
259
|
addEventListener(viewport, "scroll", () => {
|
|
1139
260
|
scrollTop.value = viewport.scrollTop;
|
|
1140
261
|
});
|
|
1141
262
|
insertDynamic(head, null, () => createHeader(props));
|
|
1142
263
|
insertDynamic(body, null, () => createBody(props, scrollTop.value));
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
264
|
+
insertBefore2(table, head, null);
|
|
265
|
+
insertBefore2(table, body, null);
|
|
266
|
+
insertBefore2(viewport, table, null);
|
|
1146
267
|
insertDynamic(footer, null, () => createFooter(props));
|
|
1147
|
-
|
|
268
|
+
effect2(() => {
|
|
1148
269
|
setProperty(footer, "hidden", !shouldShowFooter(props));
|
|
1149
270
|
});
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
271
|
+
insertBefore2(root, toolbar, null);
|
|
272
|
+
insertBefore2(root, viewport, null);
|
|
273
|
+
insertBefore2(root, footer, null);
|
|
1153
274
|
return root;
|
|
1154
275
|
}
|
|
1155
276
|
__name(KitDataTable, "KitDataTable");
|
|
1156
277
|
function createHeader(props) {
|
|
1157
278
|
const columns = visibleColumns(props);
|
|
1158
|
-
return
|
|
279
|
+
return createFragment2((parent, anchor) => {
|
|
1159
280
|
const row = createElement("tr");
|
|
1160
281
|
for (const column of columns) {
|
|
1161
282
|
const cell = createElement("th");
|
|
1162
|
-
|
|
1163
|
-
|
|
283
|
+
setAttribute2(cell, "scope", "col");
|
|
284
|
+
setAttribute2(cell, "data-column-id", column.id);
|
|
1164
285
|
applyColumnStyle(cell, column, readProp(props, "columnSettings", void 0));
|
|
1165
|
-
if (column.sortable)
|
|
1166
|
-
else
|
|
1167
|
-
|
|
286
|
+
if (column.sortable) insertBefore2(cell, createSortButton(props, column, cell), null);
|
|
287
|
+
else insertBefore2(cell, createText2(column.label), null);
|
|
288
|
+
insertBefore2(row, cell, null);
|
|
1168
289
|
}
|
|
1169
|
-
|
|
290
|
+
insertBefore2(parent, row, anchor);
|
|
1170
291
|
});
|
|
1171
292
|
}
|
|
1172
293
|
__name(createHeader, "createHeader");
|
|
@@ -1174,14 +295,14 @@ function createSortButton(props, column, cell) {
|
|
|
1174
295
|
const button = createElement("button");
|
|
1175
296
|
const label = createElement("span");
|
|
1176
297
|
const icon = createElement("span");
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
298
|
+
setAttribute2(button, "type", "button");
|
|
299
|
+
setAttribute2(button, "class", "vobs-data-table__sort");
|
|
300
|
+
setAttribute2(button, "aria-label", `Sort by ${column.label}`);
|
|
301
|
+
setAttribute2(label, "class", "vobs-data-table__sort-label");
|
|
302
|
+
setAttribute2(icon, "class", "vobs-data-table__sort-icon");
|
|
303
|
+
insertBefore2(label, createText2(column.label), null);
|
|
1183
304
|
insertDynamic(icon, null, () => resolveSlot(sortIcon(props, currentSort(props), column.id)));
|
|
1184
|
-
|
|
305
|
+
effect2(() => {
|
|
1185
306
|
const sort = currentSort(props);
|
|
1186
307
|
const direction = sort?.columnId === column.id ? sort.direction : void 0;
|
|
1187
308
|
setOptionalAttribute(cell, "aria-sort", direction ? direction === "asc" ? "ascending" : "descending" : void 0);
|
|
@@ -1192,8 +313,8 @@ function createSortButton(props, column, cell) {
|
|
|
1192
313
|
const next = current?.columnId === column.id ? current.direction === "asc" ? createSort(column, "desc") : null : createSort(column, "asc");
|
|
1193
314
|
emitQuery(props, { ...currentQuery(props), sort: next, page: 1 });
|
|
1194
315
|
});
|
|
1195
|
-
|
|
1196
|
-
|
|
316
|
+
insertBefore2(button, label, null);
|
|
317
|
+
insertBefore2(button, icon, null);
|
|
1197
318
|
return button;
|
|
1198
319
|
}
|
|
1199
320
|
__name(createSortButton, "createSortButton");
|
|
@@ -1205,12 +326,12 @@ function createBody(props, scrollTop) {
|
|
|
1205
326
|
if (page.rows.length === 0) return createStateRow(props, "empty");
|
|
1206
327
|
const columns = visibleColumns(props);
|
|
1207
328
|
const window = resolveWindow(props, page.rows.length, scrollTop);
|
|
1208
|
-
const fragment =
|
|
1209
|
-
if (window.before > 0)
|
|
329
|
+
const fragment = createFragment2((parent, anchor) => {
|
|
330
|
+
if (window.before > 0) insertBefore2(parent, createSpacerRow(columns.length, window.before), anchor);
|
|
1210
331
|
for (let index = window.start; index < window.end; index++) {
|
|
1211
|
-
|
|
332
|
+
insertBefore2(parent, createRow(props, page.rows[index], index, columns), anchor);
|
|
1212
333
|
}
|
|
1213
|
-
if (window.after > 0)
|
|
334
|
+
if (window.after > 0) insertBefore2(parent, createSpacerRow(columns.length, window.after), anchor);
|
|
1214
335
|
});
|
|
1215
336
|
return fragment;
|
|
1216
337
|
}
|
|
@@ -1218,18 +339,18 @@ __name(createBody, "createBody");
|
|
|
1218
339
|
function createStateRow(props, kind, error) {
|
|
1219
340
|
const row = createElement("tr");
|
|
1220
341
|
const cell = createElement("td");
|
|
1221
|
-
|
|
1222
|
-
|
|
342
|
+
setAttribute2(cell, "class", `vobs-data-table__state vobs-data-table__state--${kind}`);
|
|
343
|
+
setAttribute2(cell, "colspan", String(Math.max(1, visibleColumns(props).length)));
|
|
1223
344
|
let content;
|
|
1224
345
|
if (kind === "error") {
|
|
1225
346
|
const fallback = readProp(props, "error", void 0);
|
|
1226
347
|
const resource = readProp(props, "resource", void 0);
|
|
1227
|
-
content = fallback ? resolveSlot(fallback(error, () => resource?.refetch() ?? Promise.resolve())) :
|
|
348
|
+
content = fallback ? resolveSlot(fallback(error, () => resource?.refetch() ?? Promise.resolve())) : createText2(error?.message ?? "Unable to load data");
|
|
1228
349
|
} else {
|
|
1229
|
-
content = resolveSlot(readProp(props, kind, void 0)) ??
|
|
350
|
+
content = resolveSlot(readProp(props, kind, void 0)) ?? createText2(kind === "loading" ? "Loading..." : "No data");
|
|
1230
351
|
}
|
|
1231
|
-
if (content)
|
|
1232
|
-
|
|
352
|
+
if (content) insertBefore2(cell, content, null);
|
|
353
|
+
insertBefore2(row, cell, null);
|
|
1233
354
|
return row;
|
|
1234
355
|
}
|
|
1235
356
|
__name(createStateRow, "createStateRow");
|
|
@@ -1240,15 +361,15 @@ function createRow(props, row, index, columns) {
|
|
|
1240
361
|
const onRowClick = readProp(props, "onRowClick", void 0);
|
|
1241
362
|
if (onRowClick) {
|
|
1242
363
|
setProperty(tableRow, "tabIndex", 0);
|
|
1243
|
-
|
|
364
|
+
setAttribute2(tableRow, "data-clickable", "true");
|
|
1244
365
|
addEventListener(tableRow, "click", () => onRowClick(row, index));
|
|
1245
366
|
}
|
|
1246
367
|
for (const column of columns) {
|
|
1247
368
|
const cell = createElement("td");
|
|
1248
|
-
|
|
369
|
+
setAttribute2(cell, "data-column-id", column.id);
|
|
1249
370
|
applyColumnStyle(cell, column, readProp(props, "columnSettings", void 0));
|
|
1250
371
|
insertDynamic(cell, null, () => resolveSlot(column.render ? column.render(row, index) : column.key === void 0 ? void 0 : readRowValue(row, column.key)));
|
|
1251
|
-
|
|
372
|
+
insertBefore2(tableRow, cell, null);
|
|
1252
373
|
}
|
|
1253
374
|
return tableRow;
|
|
1254
375
|
}
|
|
@@ -1256,22 +377,22 @@ __name(createRow, "createRow");
|
|
|
1256
377
|
function createSpacerRow(columnCount, height) {
|
|
1257
378
|
const row = createElement("tr");
|
|
1258
379
|
const cell = createElement("td");
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
380
|
+
setAttribute2(cell, "class", "vobs-data-table__spacer");
|
|
381
|
+
setAttribute2(cell, "colspan", String(Math.max(1, columnCount)));
|
|
382
|
+
setAttribute2(cell, "style", `height: ${height}px`);
|
|
383
|
+
insertBefore2(row, cell, null);
|
|
1263
384
|
return row;
|
|
1264
385
|
}
|
|
1265
386
|
__name(createSpacerRow, "createSpacerRow");
|
|
1266
387
|
function createFooter(props) {
|
|
1267
388
|
const custom = readProp(props, "footer", void 0);
|
|
1268
|
-
if (custom !== void 0) return resolveSlot(custom) ??
|
|
389
|
+
if (custom !== void 0) return resolveSlot(custom) ?? createText2("");
|
|
1269
390
|
const pagination = resolvePaginationState(props);
|
|
1270
391
|
const root = createElement("div");
|
|
1271
392
|
const summary = createElement("span");
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
393
|
+
setAttribute2(root, "class", "vobs-data-table__footer-content");
|
|
394
|
+
setAttribute2(summary, "class", "vobs-data-table__summary");
|
|
395
|
+
insertBefore2(summary, createText2(pageLabel(
|
|
1275
396
|
props,
|
|
1276
397
|
pagination.page,
|
|
1277
398
|
pagination.pageCount,
|
|
@@ -1280,8 +401,8 @@ function createFooter(props) {
|
|
|
1280
401
|
pagination.pageSize
|
|
1281
402
|
)), null);
|
|
1282
403
|
const actions = hasProp(props, "pagination") ? createCustomPagination(props, pagination) : createPagination(props, pagination);
|
|
1283
|
-
|
|
1284
|
-
if (actions)
|
|
404
|
+
insertBefore2(root, summary, null);
|
|
405
|
+
if (actions) insertBefore2(root, actions, null);
|
|
1285
406
|
return root;
|
|
1286
407
|
}
|
|
1287
408
|
__name(createFooter, "createFooter");
|
|
@@ -1304,20 +425,20 @@ __name(createCustomPagination, "createCustomPagination");
|
|
|
1304
425
|
function createPagination(props, pagination) {
|
|
1305
426
|
const root = createElement("div");
|
|
1306
427
|
const mode = readProp(props, "paginationMode", "simple");
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
428
|
+
setAttribute2(root, "class", "vobs-data-table__pagination");
|
|
429
|
+
setAttribute2(root, "data-mode", mode);
|
|
430
|
+
insertBefore2(root, createPageButton(props, "previous", pagination), null);
|
|
1310
431
|
if (mode !== "simple") {
|
|
1311
432
|
const pages = createElement("div");
|
|
1312
|
-
|
|
433
|
+
setAttribute2(pages, "class", "vobs-data-table__pagination-pages");
|
|
1313
434
|
for (const item of buildPaginationItems(pagination.page, pagination.pageCount)) {
|
|
1314
|
-
|
|
435
|
+
insertBefore2(pages, typeof item === "number" ? createPageNumberButton(props, item, pagination.page) : createPageEllipsis(item), null);
|
|
1315
436
|
}
|
|
1316
|
-
|
|
437
|
+
insertBefore2(root, pages, null);
|
|
1317
438
|
}
|
|
1318
|
-
|
|
1319
|
-
if (mode === "all")
|
|
1320
|
-
|
|
439
|
+
insertBefore2(root, createPageButton(props, "next", pagination), null);
|
|
440
|
+
if (mode === "all") insertBefore2(root, createJumpControl(props, pagination), null);
|
|
441
|
+
insertBefore2(root, createPageSizeControl(props, pagination), null);
|
|
1321
442
|
return root;
|
|
1322
443
|
}
|
|
1323
444
|
__name(createPagination, "createPagination");
|
|
@@ -1325,14 +446,14 @@ function createPageButton(props, direction, pagination) {
|
|
|
1325
446
|
const button = createElement("button");
|
|
1326
447
|
const label = direction === "previous" ? readProp(props, "previousLabel", "Previous") : readProp(props, "nextLabel", "Next");
|
|
1327
448
|
const disabled = direction === "previous" ? pagination.page <= 1 : pagination.page >= pagination.pageCount;
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
449
|
+
setAttribute2(button, "type", "button");
|
|
450
|
+
setAttribute2(button, "class", "vobs-data-table__page-button");
|
|
451
|
+
setAttribute2(button, "aria-label", label);
|
|
1331
452
|
setProperty(button, "disabled", disabled);
|
|
1332
453
|
const icons = resolveIcons(props);
|
|
1333
454
|
const icon = direction === "previous" ? icons.previous : icons.next;
|
|
1334
455
|
const node = icon === void 0 ? void 0 : resolveSlot(icon);
|
|
1335
|
-
if (node)
|
|
456
|
+
if (node) insertBefore2(button, node, null);
|
|
1336
457
|
addEventListener(button, "click", () => {
|
|
1337
458
|
if (disabled) return;
|
|
1338
459
|
const query = currentQuery(props);
|
|
@@ -1344,21 +465,21 @@ __name(createPageButton, "createPageButton");
|
|
|
1344
465
|
function createPageNumberButton(props, page, currentPage) {
|
|
1345
466
|
const button = createElement("button");
|
|
1346
467
|
const active = page === currentPage;
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
if (active)
|
|
1351
|
-
|
|
468
|
+
setAttribute2(button, "type", "button");
|
|
469
|
+
setAttribute2(button, "class", `vobs-data-table__page-button${active ? " is-active" : ""}`);
|
|
470
|
+
setAttribute2(button, "aria-label", `Page ${page}`);
|
|
471
|
+
if (active) setAttribute2(button, "aria-current", "page");
|
|
472
|
+
insertBefore2(button, createText2(String(page)), null);
|
|
1352
473
|
addEventListener(button, "click", () => goToPage(props, page, resolvePaginationState(props).pageCount));
|
|
1353
474
|
return button;
|
|
1354
475
|
}
|
|
1355
476
|
__name(createPageNumberButton, "createPageNumberButton");
|
|
1356
477
|
function createPageEllipsis(side) {
|
|
1357
478
|
const ellipsis = createElement("span");
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
479
|
+
setAttribute2(ellipsis, "class", "vobs-data-table__page-ellipsis");
|
|
480
|
+
setAttribute2(ellipsis, "aria-hidden", "true");
|
|
481
|
+
setAttribute2(ellipsis, "data-side", side);
|
|
482
|
+
insertBefore2(ellipsis, createText2("..."), null);
|
|
1362
483
|
return ellipsis;
|
|
1363
484
|
}
|
|
1364
485
|
__name(createPageEllipsis, "createPageEllipsis");
|
|
@@ -1368,22 +489,22 @@ function createJumpControl(props, pagination) {
|
|
|
1368
489
|
const input = createElement("input");
|
|
1369
490
|
const submit = createElement("button");
|
|
1370
491
|
const jumpLabel = readProp(props, "jumpToLabel", "Go to");
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
492
|
+
setAttribute2(root, "class", "vobs-data-table__pagination-jump");
|
|
493
|
+
setAttribute2(label, "class", "vobs-data-table__jump-label");
|
|
494
|
+
setAttribute2(input, "class", "vobs-data-table__jump-input");
|
|
495
|
+
setAttribute2(input, "type", "text");
|
|
496
|
+
setAttribute2(input, "inputmode", "numeric");
|
|
497
|
+
setAttribute2(input, "pattern", "[0-9]*");
|
|
498
|
+
setAttribute2(input, "autocomplete", "off");
|
|
499
|
+
setAttribute2(input, "aria-label", jumpLabel);
|
|
500
|
+
setAttribute2(input, "placeholder", readProp(props, "jumpToPlaceholder", "Page"));
|
|
1380
501
|
setProperty(input, "value", String(pagination.page));
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
502
|
+
setAttribute2(submit, "type", "submit");
|
|
503
|
+
setAttribute2(submit, "class", "vobs-data-table__page-button vobs-data-table__jump-submit");
|
|
504
|
+
setAttribute2(submit, "aria-label", readProp(props, "jumpToSubmitLabel", "Go"));
|
|
505
|
+
insertBefore2(label, createText2(jumpLabel), null);
|
|
506
|
+
insertBefore2(label, input, null);
|
|
507
|
+
insertBefore2(submit, createText2(readProp(props, "jumpToSubmitLabel", "Go")), null);
|
|
1387
508
|
addEventListener(input, "input", () => {
|
|
1388
509
|
const value = input.value.replace(/[^0-9]/gu, "");
|
|
1389
510
|
if (value !== input.value) setProperty(input, "value", value);
|
|
@@ -1395,8 +516,8 @@ function createJumpControl(props, pagination) {
|
|
|
1395
516
|
if (!Number.isSafeInteger(requested)) return;
|
|
1396
517
|
goToPage(props, requested, pagination.pageCount);
|
|
1397
518
|
});
|
|
1398
|
-
|
|
1399
|
-
|
|
519
|
+
insertBefore2(root, label, null);
|
|
520
|
+
insertBefore2(root, submit, null);
|
|
1400
521
|
return root;
|
|
1401
522
|
}
|
|
1402
523
|
__name(createJumpControl, "createJumpControl");
|
|
@@ -1404,21 +525,21 @@ function createPageSizeControl(props, pagination) {
|
|
|
1404
525
|
const root = createElement("label");
|
|
1405
526
|
const select = createElement("select");
|
|
1406
527
|
const label = readProp(props, "pageSizeLabel", "Rows per page");
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
528
|
+
setAttribute2(root, "class", "vobs-data-table__page-size");
|
|
529
|
+
setAttribute2(select, "class", "vobs-data-table__page-size-select");
|
|
530
|
+
setAttribute2(select, "aria-label", label);
|
|
531
|
+
insertBefore2(root, createText2(label), null);
|
|
1411
532
|
for (const optionValue of pageSizeOptions(props, pagination.pageSize)) {
|
|
1412
533
|
const option = createElement("option");
|
|
1413
|
-
|
|
534
|
+
setAttribute2(option, "value", String(optionValue));
|
|
1414
535
|
setProperty(option, "textContent", String(optionValue));
|
|
1415
|
-
|
|
536
|
+
insertBefore2(select, option, null);
|
|
1416
537
|
}
|
|
1417
538
|
setProperty(select, "value", String(pagination.pageSize));
|
|
1418
539
|
addEventListener(select, "change", () => {
|
|
1419
540
|
setPageSize(props, Number(select.value));
|
|
1420
541
|
});
|
|
1421
|
-
|
|
542
|
+
insertBefore2(root, select, null);
|
|
1422
543
|
return root;
|
|
1423
544
|
}
|
|
1424
545
|
__name(createPageSizeControl, "createPageSizeControl");
|
|
@@ -1647,7 +768,7 @@ function applyColumnStyle(cell, column, settings) {
|
|
|
1647
768
|
normalizePixels(width) ? `width: ${normalizePixels(width)}` : "",
|
|
1648
769
|
normalizePixels(column.minWidth) ? `min-width: ${normalizePixels(column.minWidth)}` : ""
|
|
1649
770
|
].filter(Boolean).join("; ");
|
|
1650
|
-
if (styles)
|
|
771
|
+
if (styles) setAttribute2(cell, "style", styles);
|
|
1651
772
|
setOptionalAttribute(cell, "data-align", column.align);
|
|
1652
773
|
}
|
|
1653
774
|
__name(applyColumnStyle, "applyColumnStyle");
|
|
@@ -1663,7 +784,7 @@ function readRowValue(row, key) {
|
|
|
1663
784
|
return row === null || row === void 0 ? void 0 : Reflect.get(row, key);
|
|
1664
785
|
}
|
|
1665
786
|
__name(readRowValue, "readRowValue");
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
787
|
+
export {
|
|
788
|
+
KitDataTable
|
|
789
|
+
};
|
|
1669
790
|
//# sourceMappingURL=data-table.js.map
|