@santi020k/lumen-elements 0.1.0 → 0.2.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/README.md +8 -4
- package/dist/define.d.ts.map +1 -1
- package/dist/define.js +471 -11
- package/layers.css +1 -0
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -74,10 +74,12 @@ Elements emit the same `ui-*` classes and `data-ui-*` attributes as the Astro pr
|
|
|
74
74
|
remains the reference package, and the Web Components adapter now carries matching light-DOM
|
|
75
75
|
behavior for DataTable, Dialog, Popover, DropdownMenu, ContextMenu, Tabs, Select, ThemeBuilder,
|
|
76
76
|
Toast, Tooltip, forms, Calendar, InputOTP, DateRangePicker, RichTextEditor, Schedule, Resizable,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
VirtualList, FileUpload, Tour, Anchor, Transfer, Mentions, Cascader, and TreeSelect: selection,
|
|
78
|
+
validation, calendar grids, OTP segmentation, date range syncing, rich text command, context menu,
|
|
79
|
+
schedule and file drag/drop, anchored tours, scroll spy, collection transfer, mention insertion,
|
|
80
|
+
hierarchical selection, resizable pane sizing, theme, and range events, ARIA state, keyboard
|
|
81
|
+
navigation, Escape/outside dismissal, focus return/trapping, native form participation, and the
|
|
82
|
+
document-level toast controller events.
|
|
81
83
|
|
|
82
84
|
## Interactive behavior
|
|
83
85
|
|
|
@@ -88,6 +90,8 @@ Astro runtime's data event, validation, calendar grids, OTP segmentation, date r
|
|
|
88
90
|
text command, context menu, schedule drag/drop, resizable pane sizing, theme export, ARIA,
|
|
89
91
|
keyboard, Escape, dismissal, and toast controller semantics while keeping markup declarative and
|
|
90
92
|
Declarative-Shadow-DOM friendly.
|
|
93
|
+
FileUpload, Tour, Anchor, Transfer, Mentions, Cascader, and TreeSelect also run directly through
|
|
94
|
+
their registered custom elements; no Astro runtime or host controller is required.
|
|
91
95
|
Rich text controls may provide `data-ui-editor-value` for commands such as `formatBlock` and
|
|
92
96
|
`createLink`; editable surfaces emit `ui:editor-change` with both HTML and plain text, support common
|
|
93
97
|
formatting shortcuts, and keep toggle controls synchronized through `aria-pressed`.
|
package/dist/define.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAyBA,KAAK,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAE/D,KAAK,cAAc,GACf,eAAe,GACf,aAAa,GACb,cAAc,GACd,YAAY,GACZ,UAAU,GACV,WAAW,CAAA;AAEf,KAAK,YAAY,GAAG,MAAM,CAAA;AAY1B,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACzD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,CAAA;IACvC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAClD;AAED,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,iBAAiB,CAAA;IACpC,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;
|
|
1
|
+
{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"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"}
|
package/dist/define.js
CHANGED
|
@@ -83,7 +83,14 @@ const glassAttributeClasses = (className) => ({
|
|
|
83
83
|
surface: { glass: className }
|
|
84
84
|
});
|
|
85
85
|
const elementConfigs = {
|
|
86
|
-
Accordion: {
|
|
86
|
+
Accordion: {
|
|
87
|
+
attributeClasses: {
|
|
88
|
+
variant: { flush: 'ui-accordion--flush' }
|
|
89
|
+
},
|
|
90
|
+
baseClassName: 'ui-accordion',
|
|
91
|
+
defaults: { variant: 'default' },
|
|
92
|
+
tagName: 'lumen-accordion'
|
|
93
|
+
},
|
|
87
94
|
Alert: {
|
|
88
95
|
attributeClasses: {
|
|
89
96
|
glass: { strong: 'ui-alert--glass ui-glass-strong', subtle: 'ui-alert--glass ui-glass-subtle', true: 'ui-alert--glass' },
|
|
@@ -171,7 +178,8 @@ const elementConfigs = {
|
|
|
171
178
|
variant: {
|
|
172
179
|
glass: 'ui-card--glass',
|
|
173
180
|
interactive: 'ui-card--interactive',
|
|
174
|
-
muted: 'ui-card--muted'
|
|
181
|
+
muted: 'ui-card--muted',
|
|
182
|
+
unstyled: 'ui-card--unstyled'
|
|
175
183
|
}
|
|
176
184
|
},
|
|
177
185
|
baseClassName: 'ui-card',
|
|
@@ -187,6 +195,9 @@ const elementConfigs = {
|
|
|
187
195
|
variant: {
|
|
188
196
|
block: 'ui-code--block',
|
|
189
197
|
inline: 'ui-code--inline'
|
|
198
|
+
},
|
|
199
|
+
wrap: {
|
|
200
|
+
true: 'ui-code--wrap'
|
|
190
201
|
}
|
|
191
202
|
},
|
|
192
203
|
baseClassName: 'ui-code',
|
|
@@ -281,7 +292,7 @@ const elementConfigs = {
|
|
|
281
292
|
Item: { attributeClasses: glassAttributeClasses('ui-item--glass'), baseClassName: 'ui-item', tagName: 'lumen-item' },
|
|
282
293
|
Kbd: { baseClassName: 'ui-kbd', tagName: 'lumen-kbd' },
|
|
283
294
|
Label: { baseClassName: 'ui-label', tagName: 'lumen-label' },
|
|
284
|
-
Link: { baseClassName: 'ui-link', tagName: 'lumen-link' },
|
|
295
|
+
Link: { attributeClasses: { variant: { inherit: 'ui-link--inherit' } }, baseClassName: 'ui-link', tagName: 'lumen-link' },
|
|
285
296
|
Marker: {
|
|
286
297
|
attributeClasses: {
|
|
287
298
|
variant: {
|
|
@@ -319,7 +330,8 @@ const elementConfigs = {
|
|
|
319
330
|
NavigationMenu: {
|
|
320
331
|
attributeClasses: {
|
|
321
332
|
glass: { strong: 'ui-navigation-menu--glass ui-glass-strong', subtle: 'ui-navigation-menu--glass ui-glass-subtle', true: 'ui-navigation-menu--glass' },
|
|
322
|
-
surface: { glass: 'ui-navigation-menu--glass' }
|
|
333
|
+
surface: { glass: 'ui-navigation-menu--glass' },
|
|
334
|
+
variant: { unstyled: 'ui-navigation-menu--unstyled' }
|
|
323
335
|
},
|
|
324
336
|
baseClassName: 'ui-navigation-menu',
|
|
325
337
|
defaults: { 'data-ui-navigation-menu': '', surface: 'default' },
|
|
@@ -381,7 +393,8 @@ const elementConfigs = {
|
|
|
381
393
|
Sidebar: {
|
|
382
394
|
attributeClasses: {
|
|
383
395
|
glass: { strong: 'ui-sidebar--glass ui-glass-strong', subtle: 'ui-sidebar--glass ui-glass-subtle', true: 'ui-sidebar--glass' },
|
|
384
|
-
surface: { glass: 'ui-sidebar--glass' }
|
|
396
|
+
surface: { glass: 'ui-sidebar--glass' },
|
|
397
|
+
variant: { unstyled: 'ui-sidebar--unstyled' }
|
|
385
398
|
},
|
|
386
399
|
baseClassName: 'ui-sidebar',
|
|
387
400
|
defaults: { surface: 'default' },
|
|
@@ -419,7 +432,6 @@ const elementConfigs = {
|
|
|
419
432
|
tagName: 'lumen-toast'
|
|
420
433
|
},
|
|
421
434
|
Toggle: {
|
|
422
|
-
attributeClasses: { pressed: { true: 'ui-toggle--pressed' } },
|
|
423
435
|
baseClassName: 'ui-toggle',
|
|
424
436
|
defaults: { 'aria-pressed': 'false', 'data-ui-toggle': '', role: 'button', tabindex: '0' },
|
|
425
437
|
role: 'button',
|
|
@@ -498,7 +510,10 @@ const elementConfigs = {
|
|
|
498
510
|
AnimatedLogo: { baseClassName: 'ui-animated-logo', tagName: 'lumen-animated-logo' },
|
|
499
511
|
AnimatedPortrait: { baseClassName: 'ui-animated-portrait', tagName: 'lumen-animated-portrait' },
|
|
500
512
|
ButtonLink: {
|
|
501
|
-
attributeClasses: {
|
|
513
|
+
attributeClasses: {
|
|
514
|
+
shape: { icon: 'ui-button-link--icon' },
|
|
515
|
+
variant: { unstyled: 'ui-button-link--unstyled' }
|
|
516
|
+
},
|
|
502
517
|
baseClassName: 'ui-button-link',
|
|
503
518
|
tagName: 'lumen-button-link'
|
|
504
519
|
},
|
|
@@ -3070,10 +3085,10 @@ class LumenDataTableBehaviorElement extends LumenElement {
|
|
|
3070
3085
|
selectAll.indeterminate = selectedValues.length > 0 && selectedValues.length < rows.length;
|
|
3071
3086
|
this.syncSelectionInputs(selectedValues);
|
|
3072
3087
|
if (dispatch) {
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
}));
|
|
3088
|
+
const detail = { values: selectedValues };
|
|
3089
|
+
this.dispatchEvent(new CustomEvent('ui:data-table-selection-change', { bubbles: true, detail }));
|
|
3090
|
+
// Deprecated compatibility event. Remove in Lumen 1.0.
|
|
3091
|
+
this.dispatchEvent(new CustomEvent('ui:datatable-selection-change', { bubbles: true, detail }));
|
|
3077
3092
|
}
|
|
3078
3093
|
}
|
|
3079
3094
|
syncSelectionInputs(selectedValues) {
|
|
@@ -3461,6 +3476,444 @@ class LumenToastBehaviorElement extends LumenElement {
|
|
|
3461
3476
|
clearToastTimer(this);
|
|
3462
3477
|
}
|
|
3463
3478
|
}
|
|
3479
|
+
class LumenFileUploadBehaviorElement extends LumenElement {
|
|
3480
|
+
abortController;
|
|
3481
|
+
connectedCallback() {
|
|
3482
|
+
super.connectedCallback();
|
|
3483
|
+
this.abortController?.abort();
|
|
3484
|
+
this.abortController = new AbortController();
|
|
3485
|
+
const input = this.querySelector('[data-ui-file-upload-input]');
|
|
3486
|
+
if (!input)
|
|
3487
|
+
return;
|
|
3488
|
+
const files = this.querySelector('[data-ui-file-upload-files]');
|
|
3489
|
+
const renderFiles = () => {
|
|
3490
|
+
const selectedFiles = input.files ? [...input.files] : [];
|
|
3491
|
+
this.dataset.state = selectedFiles.length > 0 ? 'selected' : 'idle';
|
|
3492
|
+
if (!files)
|
|
3493
|
+
return;
|
|
3494
|
+
if (selectedFiles.length === 1) {
|
|
3495
|
+
files.textContent = selectedFiles[0]?.name ?? '';
|
|
3496
|
+
}
|
|
3497
|
+
else {
|
|
3498
|
+
files.textContent = selectedFiles.length > 1
|
|
3499
|
+
? `${selectedFiles.length} files selected`
|
|
3500
|
+
: '';
|
|
3501
|
+
}
|
|
3502
|
+
};
|
|
3503
|
+
input.addEventListener('change', renderFiles, { signal: this.abortController.signal });
|
|
3504
|
+
this.addEventListener('dragover', event => {
|
|
3505
|
+
if (input.disabled)
|
|
3506
|
+
return;
|
|
3507
|
+
event.preventDefault();
|
|
3508
|
+
this.dataset.state = 'drag-over';
|
|
3509
|
+
}, { signal: this.abortController.signal });
|
|
3510
|
+
this.addEventListener('dragleave', event => {
|
|
3511
|
+
if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
|
|
3512
|
+
return;
|
|
3513
|
+
this.dataset.state = input.files?.length ? 'selected' : 'idle';
|
|
3514
|
+
}, { signal: this.abortController.signal });
|
|
3515
|
+
this.addEventListener('drop', event => {
|
|
3516
|
+
if (input.disabled)
|
|
3517
|
+
return;
|
|
3518
|
+
event.preventDefault();
|
|
3519
|
+
if (event.dataTransfer) {
|
|
3520
|
+
input.files = event.dataTransfer.files;
|
|
3521
|
+
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
3522
|
+
}
|
|
3523
|
+
}, { signal: this.abortController.signal });
|
|
3524
|
+
renderFiles();
|
|
3525
|
+
}
|
|
3526
|
+
disconnectedCallback() {
|
|
3527
|
+
this.abortController?.abort();
|
|
3528
|
+
this.abortController = undefined;
|
|
3529
|
+
}
|
|
3530
|
+
}
|
|
3531
|
+
class LumenAnchorBehaviorElement extends LumenElement {
|
|
3532
|
+
observer;
|
|
3533
|
+
connectedCallback() {
|
|
3534
|
+
super.connectedCallback();
|
|
3535
|
+
this.observer?.disconnect();
|
|
3536
|
+
if (typeof IntersectionObserver === 'undefined')
|
|
3537
|
+
return;
|
|
3538
|
+
const links = [...this.querySelectorAll('a[href^="#"]')];
|
|
3539
|
+
const byId = new Map();
|
|
3540
|
+
const targets = [];
|
|
3541
|
+
for (const link of links) {
|
|
3542
|
+
const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '');
|
|
3543
|
+
const target = id ? document.getElementById(id) : null;
|
|
3544
|
+
if (target) {
|
|
3545
|
+
byId.set(id, link);
|
|
3546
|
+
targets.push(target);
|
|
3547
|
+
}
|
|
3548
|
+
}
|
|
3549
|
+
if (!targets.length)
|
|
3550
|
+
return;
|
|
3551
|
+
this.observer = new IntersectionObserver(entries => {
|
|
3552
|
+
const visibleEntry = entries.find(entry => entry.isIntersecting);
|
|
3553
|
+
if (!visibleEntry)
|
|
3554
|
+
return;
|
|
3555
|
+
for (const link of links) {
|
|
3556
|
+
link.dataset.active = 'false';
|
|
3557
|
+
}
|
|
3558
|
+
const active = byId.get(visibleEntry.target.id);
|
|
3559
|
+
if (active)
|
|
3560
|
+
active.dataset.active = 'true';
|
|
3561
|
+
}, { rootMargin: '0px 0px -70% 0px', threshold: 0 });
|
|
3562
|
+
for (const target of targets) {
|
|
3563
|
+
this.observer.observe(target);
|
|
3564
|
+
}
|
|
3565
|
+
}
|
|
3566
|
+
disconnectedCallback() {
|
|
3567
|
+
this.observer?.disconnect();
|
|
3568
|
+
this.observer = undefined;
|
|
3569
|
+
}
|
|
3570
|
+
}
|
|
3571
|
+
class LumenTourBehaviorElement extends LumenElement {
|
|
3572
|
+
abortController;
|
|
3573
|
+
opener = null;
|
|
3574
|
+
connectedCallback() {
|
|
3575
|
+
super.connectedCallback();
|
|
3576
|
+
this.abortController?.abort();
|
|
3577
|
+
this.abortController = new AbortController();
|
|
3578
|
+
const popover = this.querySelector('[data-ui-tour-popover]');
|
|
3579
|
+
const steps = [...this.querySelectorAll('[data-ui-tour-step]')];
|
|
3580
|
+
if (!popover || !steps.length)
|
|
3581
|
+
return;
|
|
3582
|
+
let index = 0;
|
|
3583
|
+
const positionStep = () => {
|
|
3584
|
+
const step = steps[index];
|
|
3585
|
+
if (!step)
|
|
3586
|
+
return;
|
|
3587
|
+
for (const [stepIndex, node] of steps.entries()) {
|
|
3588
|
+
node.hidden = stepIndex !== index;
|
|
3589
|
+
}
|
|
3590
|
+
const target = step.dataset.target
|
|
3591
|
+
? document.querySelector(step.dataset.target)
|
|
3592
|
+
: null;
|
|
3593
|
+
if (target) {
|
|
3594
|
+
const rect = target.getBoundingClientRect();
|
|
3595
|
+
popover.style.top = `${rect.bottom + 8}px`;
|
|
3596
|
+
popover.style.left = `${rect.left}px`;
|
|
3597
|
+
}
|
|
3598
|
+
};
|
|
3599
|
+
const open = () => {
|
|
3600
|
+
this.hidden = false;
|
|
3601
|
+
index = 0;
|
|
3602
|
+
positionStep();
|
|
3603
|
+
};
|
|
3604
|
+
const close = () => {
|
|
3605
|
+
this.hidden = true;
|
|
3606
|
+
};
|
|
3607
|
+
this.addEventListener('click', event => {
|
|
3608
|
+
const target = event.target;
|
|
3609
|
+
if (!(target instanceof HTMLElement))
|
|
3610
|
+
return;
|
|
3611
|
+
if (target.closest('[data-ui-tour-next]')) {
|
|
3612
|
+
if (index < steps.length - 1) {
|
|
3613
|
+
index += 1;
|
|
3614
|
+
positionStep();
|
|
3615
|
+
}
|
|
3616
|
+
else {
|
|
3617
|
+
close();
|
|
3618
|
+
}
|
|
3619
|
+
}
|
|
3620
|
+
else if (target.closest('[data-ui-tour-prev]')) {
|
|
3621
|
+
if (index > 0) {
|
|
3622
|
+
index -= 1;
|
|
3623
|
+
positionStep();
|
|
3624
|
+
}
|
|
3625
|
+
}
|
|
3626
|
+
else if (target.closest('[data-ui-tour-close]') || target.hasAttribute('data-ui-tour-backdrop')) {
|
|
3627
|
+
close();
|
|
3628
|
+
}
|
|
3629
|
+
}, { signal: this.abortController.signal });
|
|
3630
|
+
this.opener = this.id
|
|
3631
|
+
? document.querySelector(`[data-ui-tour-open="#${this.id}"]`)
|
|
3632
|
+
: null;
|
|
3633
|
+
this.opener?.addEventListener('click', open, { signal: this.abortController.signal });
|
|
3634
|
+
const lumenWindow = window;
|
|
3635
|
+
lumenWindow.LumenTours ??= {};
|
|
3636
|
+
if (this.id)
|
|
3637
|
+
lumenWindow.LumenTours[this.id] = open;
|
|
3638
|
+
}
|
|
3639
|
+
disconnectedCallback() {
|
|
3640
|
+
this.abortController?.abort();
|
|
3641
|
+
this.abortController = undefined;
|
|
3642
|
+
this.opener = null;
|
|
3643
|
+
const lumenWindow = window;
|
|
3644
|
+
if (this.id && lumenWindow.LumenTours)
|
|
3645
|
+
Reflect.deleteProperty(lumenWindow.LumenTours, this.id);
|
|
3646
|
+
}
|
|
3647
|
+
}
|
|
3648
|
+
class LumenTransferBehaviorElement extends LumenElement {
|
|
3649
|
+
abortController;
|
|
3650
|
+
connectedCallback() {
|
|
3651
|
+
super.connectedCallback();
|
|
3652
|
+
this.abortController?.abort();
|
|
3653
|
+
this.abortController = new AbortController();
|
|
3654
|
+
const lists = new Map();
|
|
3655
|
+
for (const list of this.querySelectorAll('[data-ui-transfer-list]')) {
|
|
3656
|
+
if (list.dataset.side)
|
|
3657
|
+
lists.set(list.dataset.side, list);
|
|
3658
|
+
}
|
|
3659
|
+
const move = (fromSide, toSide) => {
|
|
3660
|
+
const from = lists.get(fromSide);
|
|
3661
|
+
const to = lists.get(toSide);
|
|
3662
|
+
if (!from || !to)
|
|
3663
|
+
return;
|
|
3664
|
+
const moved = [];
|
|
3665
|
+
for (const checkbox of from.querySelectorAll('[data-ui-transfer-item]')) {
|
|
3666
|
+
if (!checkbox.checked)
|
|
3667
|
+
continue;
|
|
3668
|
+
const item = checkbox.closest('.ui-transfer__item');
|
|
3669
|
+
if (item) {
|
|
3670
|
+
checkbox.checked = false;
|
|
3671
|
+
to.append(item);
|
|
3672
|
+
moved.push(checkbox.value);
|
|
3673
|
+
}
|
|
3674
|
+
}
|
|
3675
|
+
if (moved.length) {
|
|
3676
|
+
this.dispatchEvent(new CustomEvent('ui:transfer-change', {
|
|
3677
|
+
bubbles: true,
|
|
3678
|
+
detail: { from: fromSide, to: toSide, values: moved }
|
|
3679
|
+
}));
|
|
3680
|
+
}
|
|
3681
|
+
};
|
|
3682
|
+
for (const button of this.querySelectorAll('[data-ui-transfer-move]')) {
|
|
3683
|
+
button.addEventListener('click', () => {
|
|
3684
|
+
if (button.dataset.uiTransferMove === 'target') {
|
|
3685
|
+
move('source', 'target');
|
|
3686
|
+
}
|
|
3687
|
+
else if (button.dataset.uiTransferMove === 'source') {
|
|
3688
|
+
move('target', 'source');
|
|
3689
|
+
}
|
|
3690
|
+
}, { signal: this.abortController.signal });
|
|
3691
|
+
}
|
|
3692
|
+
}
|
|
3693
|
+
disconnectedCallback() {
|
|
3694
|
+
this.abortController?.abort();
|
|
3695
|
+
this.abortController = undefined;
|
|
3696
|
+
}
|
|
3697
|
+
}
|
|
3698
|
+
class LumenMentionsBehaviorElement extends LumenElement {
|
|
3699
|
+
abortController;
|
|
3700
|
+
closeTimer;
|
|
3701
|
+
connectedCallback() {
|
|
3702
|
+
super.connectedCallback();
|
|
3703
|
+
this.abortController?.abort();
|
|
3704
|
+
this.abortController = new AbortController();
|
|
3705
|
+
const input = this.querySelector('[data-ui-mentions-input]');
|
|
3706
|
+
const list = this.querySelector('[data-ui-mentions-list]');
|
|
3707
|
+
if (!input || !list)
|
|
3708
|
+
return;
|
|
3709
|
+
const trigger = this.dataset.uiMentionsTrigger ?? '@';
|
|
3710
|
+
const escapedTrigger = trigger.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
3711
|
+
const options = [...list.querySelectorAll('[data-ui-mentions-option]')];
|
|
3712
|
+
const close = () => {
|
|
3713
|
+
list.hidden = true;
|
|
3714
|
+
};
|
|
3715
|
+
const filter = () => {
|
|
3716
|
+
const caret = input.selectionStart;
|
|
3717
|
+
const match = new RegExp(`${escapedTrigger}(\\w*)$`).exec(input.value.slice(0, caret));
|
|
3718
|
+
if (!match) {
|
|
3719
|
+
close();
|
|
3720
|
+
return;
|
|
3721
|
+
}
|
|
3722
|
+
const query = (match[1] ?? '').toLowerCase();
|
|
3723
|
+
let visibleCount = 0;
|
|
3724
|
+
for (const option of options) {
|
|
3725
|
+
const visible = (option.dataset.value ?? '').toLowerCase().startsWith(query);
|
|
3726
|
+
option.hidden = !visible;
|
|
3727
|
+
if (visible)
|
|
3728
|
+
visibleCount += 1;
|
|
3729
|
+
}
|
|
3730
|
+
list.hidden = visibleCount === 0;
|
|
3731
|
+
};
|
|
3732
|
+
const insert = (value) => {
|
|
3733
|
+
const caret = input.selectionStart;
|
|
3734
|
+
const before = input.value.slice(0, caret)
|
|
3735
|
+
.replace(new RegExp(`${escapedTrigger}\\w*$`), `${trigger}${value} `);
|
|
3736
|
+
input.value = before + input.value.slice(caret);
|
|
3737
|
+
input.focus();
|
|
3738
|
+
input.setSelectionRange(before.length, before.length);
|
|
3739
|
+
close();
|
|
3740
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
3741
|
+
};
|
|
3742
|
+
input.addEventListener('input', filter, { signal: this.abortController.signal });
|
|
3743
|
+
input.addEventListener('keyup', filter, { signal: this.abortController.signal });
|
|
3744
|
+
input.addEventListener('blur', () => {
|
|
3745
|
+
this.closeTimer = globalThis.setTimeout(close, 120);
|
|
3746
|
+
}, { signal: this.abortController.signal });
|
|
3747
|
+
for (const option of options) {
|
|
3748
|
+
option.addEventListener('mousedown', event => {
|
|
3749
|
+
event.preventDefault();
|
|
3750
|
+
insert(option.dataset.value ?? '');
|
|
3751
|
+
}, { signal: this.abortController.signal });
|
|
3752
|
+
}
|
|
3753
|
+
}
|
|
3754
|
+
disconnectedCallback() {
|
|
3755
|
+
this.abortController?.abort();
|
|
3756
|
+
this.abortController = undefined;
|
|
3757
|
+
if (this.closeTimer)
|
|
3758
|
+
globalThis.clearTimeout(this.closeTimer);
|
|
3759
|
+
this.closeTimer = undefined;
|
|
3760
|
+
}
|
|
3761
|
+
}
|
|
3762
|
+
const setupSelectionDisclosure = (root, signal, rovingPanel = true) => {
|
|
3763
|
+
const trigger = root.querySelector('[data-ui-trigger]');
|
|
3764
|
+
const panel = root.querySelector('[data-ui-panel]');
|
|
3765
|
+
if (!trigger || !panel)
|
|
3766
|
+
return undefined;
|
|
3767
|
+
const close = () => { setDisclosureOpen(trigger, panel, false); };
|
|
3768
|
+
setDisclosureOpen(trigger, panel, trigger.getAttribute('aria-expanded') === 'true');
|
|
3769
|
+
trigger.addEventListener('click', () => {
|
|
3770
|
+
setDisclosureOpen(trigger, panel, trigger.getAttribute('aria-expanded') !== 'true');
|
|
3771
|
+
}, { signal });
|
|
3772
|
+
trigger.addEventListener('keydown', event => {
|
|
3773
|
+
if (!['ArrowDown', 'Enter', ' '].includes(event.key))
|
|
3774
|
+
return;
|
|
3775
|
+
event.preventDefault();
|
|
3776
|
+
setDisclosureOpen(trigger, panel, true);
|
|
3777
|
+
getFocusable(panel)[0]?.focus();
|
|
3778
|
+
}, { signal });
|
|
3779
|
+
panel.addEventListener('keydown', event => {
|
|
3780
|
+
if (event.key === 'Escape') {
|
|
3781
|
+
event.preventDefault();
|
|
3782
|
+
close();
|
|
3783
|
+
trigger.focus({ preventScroll: true });
|
|
3784
|
+
return;
|
|
3785
|
+
}
|
|
3786
|
+
if (!rovingPanel || !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
|
|
3787
|
+
return;
|
|
3788
|
+
const items = getFocusable(panel);
|
|
3789
|
+
if (!items.length)
|
|
3790
|
+
return;
|
|
3791
|
+
event.preventDefault();
|
|
3792
|
+
const currentIndex = Math.max(0, items.indexOf(document.activeElement));
|
|
3793
|
+
items[getLoopedIndex(event.key, currentIndex, items.length, ['ArrowDown'])]?.focus();
|
|
3794
|
+
}, { signal });
|
|
3795
|
+
document.addEventListener('pointerdown', event => {
|
|
3796
|
+
const target = getOwnedTarget(event);
|
|
3797
|
+
if (!target || root.contains(target))
|
|
3798
|
+
return;
|
|
3799
|
+
close();
|
|
3800
|
+
}, { signal });
|
|
3801
|
+
return { close, panel, trigger };
|
|
3802
|
+
};
|
|
3803
|
+
class LumenCascaderBehaviorElement extends LumenElement {
|
|
3804
|
+
abortController;
|
|
3805
|
+
connectedCallback() {
|
|
3806
|
+
super.connectedCallback();
|
|
3807
|
+
this.abortController?.abort();
|
|
3808
|
+
this.abortController = new AbortController();
|
|
3809
|
+
const disclosure = setupSelectionDisclosure(this, this.abortController.signal, false);
|
|
3810
|
+
if (!disclosure)
|
|
3811
|
+
return;
|
|
3812
|
+
const valueLabel = this.querySelector('[data-ui-cascader-value]');
|
|
3813
|
+
const input = this.querySelector('[data-ui-cascader-input]');
|
|
3814
|
+
const columns = [...this.querySelectorAll('.ui-cascader__column')];
|
|
3815
|
+
for (const option of this.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3816
|
+
option.addEventListener('click', () => {
|
|
3817
|
+
const column = option.closest('.ui-cascader__column');
|
|
3818
|
+
if (column) {
|
|
3819
|
+
const columnIndex = columns.indexOf(column);
|
|
3820
|
+
for (const descendant of columns.slice(columnIndex + 1)) {
|
|
3821
|
+
descendant.hidden = true;
|
|
3822
|
+
for (const descendantOption of descendant.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3823
|
+
descendantOption.dataset.active = 'false';
|
|
3824
|
+
descendantOption.setAttribute('aria-selected', 'false');
|
|
3825
|
+
}
|
|
3826
|
+
}
|
|
3827
|
+
for (const sibling of column.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3828
|
+
sibling.dataset.active = 'false';
|
|
3829
|
+
sibling.setAttribute('aria-selected', 'false');
|
|
3830
|
+
}
|
|
3831
|
+
}
|
|
3832
|
+
option.dataset.active = 'true';
|
|
3833
|
+
option.setAttribute('aria-selected', 'true');
|
|
3834
|
+
const next = option.dataset.uiCascaderNext
|
|
3835
|
+
? this.querySelector(option.dataset.uiCascaderNext)
|
|
3836
|
+
: null;
|
|
3837
|
+
if (next) {
|
|
3838
|
+
next.hidden = false;
|
|
3839
|
+
return;
|
|
3840
|
+
}
|
|
3841
|
+
const value = option.dataset.value ?? option.textContent.trim();
|
|
3842
|
+
if (valueLabel)
|
|
3843
|
+
valueLabel.textContent = option.dataset.label ?? option.textContent.trim();
|
|
3844
|
+
if (input)
|
|
3845
|
+
input.value = value;
|
|
3846
|
+
disclosure.close();
|
|
3847
|
+
this.dispatchEvent(new CustomEvent('ui:cascader-change', { bubbles: true, detail: { value } }));
|
|
3848
|
+
}, { signal: this.abortController.signal });
|
|
3849
|
+
}
|
|
3850
|
+
disclosure.panel.addEventListener('keydown', event => {
|
|
3851
|
+
const target = event.target;
|
|
3852
|
+
if (!(target instanceof HTMLElement))
|
|
3853
|
+
return;
|
|
3854
|
+
const option = target.closest('[data-ui-cascader-option]');
|
|
3855
|
+
const column = option?.closest('.ui-cascader__column');
|
|
3856
|
+
if (!option || !column)
|
|
3857
|
+
return;
|
|
3858
|
+
const columnIndex = columns.indexOf(column);
|
|
3859
|
+
const options = [...column.querySelectorAll('[data-ui-cascader-option]')];
|
|
3860
|
+
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
|
3861
|
+
event.preventDefault();
|
|
3862
|
+
options[getLoopedIndex(event.key, options.indexOf(option), options.length, ['ArrowDown'])]?.focus();
|
|
3863
|
+
}
|
|
3864
|
+
else if (event.key === 'ArrowRight') {
|
|
3865
|
+
const next = option.dataset.uiCascaderNext
|
|
3866
|
+
? this.querySelector(option.dataset.uiCascaderNext)
|
|
3867
|
+
: null;
|
|
3868
|
+
if (next) {
|
|
3869
|
+
event.preventDefault();
|
|
3870
|
+
option.click();
|
|
3871
|
+
next.querySelector('[data-ui-cascader-option]')?.focus();
|
|
3872
|
+
}
|
|
3873
|
+
}
|
|
3874
|
+
else if (event.key === 'ArrowLeft' && columnIndex > 0) {
|
|
3875
|
+
event.preventDefault();
|
|
3876
|
+
for (const descendant of columns.slice(columnIndex))
|
|
3877
|
+
descendant.hidden = true;
|
|
3878
|
+
columns.slice(0, columnIndex).reverse().find(candidate => !candidate.hidden)
|
|
3879
|
+
?.querySelector('[data-ui-cascader-option][data-active="true"]')
|
|
3880
|
+
?.focus();
|
|
3881
|
+
}
|
|
3882
|
+
}, { signal: this.abortController.signal });
|
|
3883
|
+
}
|
|
3884
|
+
disconnectedCallback() {
|
|
3885
|
+
this.abortController?.abort();
|
|
3886
|
+
this.abortController = undefined;
|
|
3887
|
+
}
|
|
3888
|
+
}
|
|
3889
|
+
class LumenTreeSelectBehaviorElement extends LumenElement {
|
|
3890
|
+
abortController;
|
|
3891
|
+
connectedCallback() {
|
|
3892
|
+
super.connectedCallback();
|
|
3893
|
+
this.abortController?.abort();
|
|
3894
|
+
this.abortController = new AbortController();
|
|
3895
|
+
const disclosure = setupSelectionDisclosure(this, this.abortController.signal);
|
|
3896
|
+
if (!disclosure)
|
|
3897
|
+
return;
|
|
3898
|
+
const valueLabel = this.querySelector('[data-ui-tree-select-value]');
|
|
3899
|
+
const input = this.querySelector('[data-ui-tree-select-input]');
|
|
3900
|
+
for (const item of this.querySelectorAll('[data-ui-panel] [data-value]')) {
|
|
3901
|
+
item.addEventListener('click', () => {
|
|
3902
|
+
const value = item.dataset.value ?? '';
|
|
3903
|
+
if (valueLabel)
|
|
3904
|
+
valueLabel.textContent = item.textContent.trim();
|
|
3905
|
+
if (input)
|
|
3906
|
+
input.value = value;
|
|
3907
|
+
disclosure.close();
|
|
3908
|
+
this.dispatchEvent(new CustomEvent('ui:tree-select-change', { bubbles: true, detail: { value } }));
|
|
3909
|
+
}, { signal: this.abortController.signal });
|
|
3910
|
+
}
|
|
3911
|
+
}
|
|
3912
|
+
disconnectedCallback() {
|
|
3913
|
+
this.abortController?.abort();
|
|
3914
|
+
this.abortController = undefined;
|
|
3915
|
+
}
|
|
3916
|
+
}
|
|
3464
3917
|
class LumenBackToTopBehaviorElement extends LumenElement {
|
|
3465
3918
|
connectedCallback() {
|
|
3466
3919
|
super.connectedCallback();
|
|
@@ -3725,13 +4178,17 @@ const createLumenBehaviorElementClass = (BaseElement, config) => class extends B
|
|
|
3725
4178
|
};
|
|
3726
4179
|
const behaviorElementClasses = {
|
|
3727
4180
|
AlertDialog: LumenDialogBehaviorElement,
|
|
4181
|
+
Anchor: LumenAnchorBehaviorElement,
|
|
3728
4182
|
AnimatedNumber: LumenAnimatedNumberBehaviorElement,
|
|
3729
4183
|
BackToTop: LumenBackToTopBehaviorElement,
|
|
4184
|
+
Cascader: LumenCascaderBehaviorElement,
|
|
3730
4185
|
DataTable: LumenDataTableBehaviorElement,
|
|
3731
4186
|
Dialog: LumenDialogBehaviorElement,
|
|
3732
4187
|
DropdownMenu: LumenDisclosureBehaviorElement,
|
|
4188
|
+
FileUpload: LumenFileUploadBehaviorElement,
|
|
3733
4189
|
Icon: LumenIconBehaviorElement,
|
|
3734
4190
|
LanguageToggle: LumenLanguageToggleBehaviorElement,
|
|
4191
|
+
Mentions: LumenMentionsBehaviorElement,
|
|
3735
4192
|
Particles: LumenParticlesBehaviorElement,
|
|
3736
4193
|
Popover: LumenDisclosureBehaviorElement,
|
|
3737
4194
|
Rating: LumenRatingBehaviorElement,
|
|
@@ -3743,6 +4200,9 @@ const behaviorElementClasses = {
|
|
|
3743
4200
|
ThemeBuilder: LumenThemeBuilderBehaviorElement,
|
|
3744
4201
|
ThemeToggle: LumenThemeToggleBehaviorElement,
|
|
3745
4202
|
Toast: LumenToastBehaviorElement,
|
|
4203
|
+
Tour: LumenTourBehaviorElement,
|
|
4204
|
+
Transfer: LumenTransferBehaviorElement,
|
|
4205
|
+
TreeSelect: LumenTreeSelectBehaviorElement,
|
|
3746
4206
|
Tooltip: LumenTooltipBehaviorElement,
|
|
3747
4207
|
VirtualList: LumenVirtualListBehaviorElement
|
|
3748
4208
|
};
|
package/layers.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "@santi020k/lumen/layers.css";
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@santi020k/lumen-elements",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
7
|
"description": "Web Components for Lumen UI.",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"sideEffects": [
|
|
10
|
+
"./layers.css",
|
|
10
11
|
"./styles.css",
|
|
11
12
|
"./dist/define.js"
|
|
12
13
|
],
|
|
@@ -23,17 +24,19 @@
|
|
|
23
24
|
"import": "./dist/define.js"
|
|
24
25
|
},
|
|
25
26
|
"./styles.css": "./styles.css",
|
|
27
|
+
"./layers.css": "./layers.css",
|
|
26
28
|
"./package.json": "./package.json"
|
|
27
29
|
},
|
|
28
30
|
"files": [
|
|
29
31
|
"dist",
|
|
32
|
+
"layers.css",
|
|
30
33
|
"styles.css",
|
|
31
34
|
"README.md",
|
|
32
35
|
"LICENSE"
|
|
33
36
|
],
|
|
34
37
|
"dependencies": {
|
|
35
|
-
"@santi020k/lumen": "^0.
|
|
36
|
-
"@santi020k/lumen-core": "^0.
|
|
38
|
+
"@santi020k/lumen": "^0.2.0",
|
|
39
|
+
"@santi020k/lumen-core": "^0.2.0"
|
|
37
40
|
},
|
|
38
41
|
"devDependencies": {
|
|
39
42
|
"@vitest/coverage-v8": "^4.1.10",
|
|
@@ -43,7 +46,7 @@
|
|
|
43
46
|
"axe-core": "^4.12.1"
|
|
44
47
|
},
|
|
45
48
|
"engines": {
|
|
46
|
-
"node": ">=22.
|
|
49
|
+
"node": ">=22.12.0"
|
|
47
50
|
},
|
|
48
51
|
"repository": {
|
|
49
52
|
"type": "git",
|