@santi020k/lumen-elements 0.1.0 → 0.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/README.md +8 -4
- package/dist/define.d.ts +2 -1
- package/dist/define.d.ts.map +1 -1
- package/dist/define.js +480 -12
- 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
CHANGED
|
@@ -52,7 +52,7 @@ export declare class LumenElement extends HTMLElement {
|
|
|
52
52
|
export declare const enhanceLumenElements: (scope?: ParentNode) => void;
|
|
53
53
|
export declare const defineLumenElements: (customElementsRegistry?: CustomElementRegistry | undefined) => void;
|
|
54
54
|
export declare const installLumenControllers: () => void;
|
|
55
|
-
export declare const lumenElementDefinitions: (readonly ["lumen-accordion" | "lumen-alert" | "lumen-alert-dialog" | "lumen-agenda" | "lumen-aspect-ratio" | "lumen-attachment" | "lumen-autocomplete" | "lumen-avatar" | "lumen-back-to-top" | "lumen-badge" | "lumen-breadcrumb" | "lumen-bubble" | "lumen-button" | "lumen-button-group" | "lumen-calendar" | "lumen-callout" | "lumen-card" | "lumen-carousel" | "lumen-chart" | "lumen-checkbox" | "lumen-collapsible" | "lumen-code" | "lumen-combobox" | "lumen-command" | "lumen-color-picker" | "lumen-context-menu" | "lumen-data-table" | "lumen-date-picker" | "lumen-date-range-picker" | "lumen-dialog" | "lumen-direction" | "lumen-drawer" | "lumen-dropdown-menu" | "lumen-empty" | "lumen-eyebrow" | "lumen-field" | "lumen-floating-badge" | "lumen-formatted-date" | "lumen-hover-card" | "lumen-icon" | "lumen-image" | "lumen-input" | "lumen-input-group" | "lumen-input-otp" | "lumen-number-field" | "lumen-item" | "lumen-kbd" | "lumen-label" | "lumen-link" | "lumen-marker" | "lumen-menubar" | "lumen-message" | "lumen-message-scroller" | "lumen-native-select" | "lumen-navigation-menu" | "lumen-pagination" | "lumen-phone-input" | "lumen-pill" | "lumen-popover" | "lumen-progress" | "lumen-prose" | "lumen-radio-group" | "lumen-resizable" | "lumen-rich-text-editor" | "lumen-scroll-area" | "lumen-schedule" | "lumen-search-field" | "lumen-select" | "lumen-separator" | "lumen-sheet" | "lumen-sidebar" | "lumen-skeleton" | "lumen-skip-link" | "lumen-slider" | "lumen-sonner" | "lumen-spinner" | "lumen-switch" | "lumen-table" | "lumen-tabs" | "lumen-tag-group" | "lumen-textarea" | "lumen-theme-builder" | "lumen-theme-toggle" | "lumen-time-field" | "lumen-toast" | "lumen-toggle" | "lumen-toggle-group" | "lumen-tooltip" | "lumen-tree" | "lumen-tree-grid" | "lumen-typography" | "lumen-virtual-list" | "lumen-language-toggle" | "lumen-particles" | "lumen-animated-number" | "lumen-reveal-group" | "lumen-scroll-reveal" | "lumen-stat" | "lumen-meter" | "lumen-note" | "lumen-rating" | "lumen-timeline" | "lumen-animated-logo" | "lumen-animated-portrait" | "lumen-button-link" | "lumen-cover-image" | "lumen-gradient-divider" | "lumen-stepper" | "lumen-file-upload" | "lumen-tour" | "lumen-anchor" | "lumen-segmented" | "lumen-toolbar" | "lumen-descriptions" | "lumen-popconfirm" | "lumen-transfer" | "lumen-cascader" | "lumen-tree-select" | "lumen-mentions" | "lumen-qr-code" | "lumen-watermark" | "lumen-affix" | "lumen-speed-dial", typeof LumenElement])[];
|
|
55
|
+
export declare const lumenElementDefinitions: (readonly ["lumen-accordion" | "lumen-alert" | "lumen-alert-dialog" | "lumen-agenda" | "lumen-aspect-ratio" | "lumen-attachment" | "lumen-autocomplete" | "lumen-avatar" | "lumen-back-to-top" | "lumen-badge" | "lumen-breadcrumb" | "lumen-bubble" | "lumen-button" | "lumen-button-group" | "lumen-calendar" | "lumen-callout" | "lumen-card" | "lumen-carousel" | "lumen-chart" | "lumen-checkbox" | "lumen-collapsible" | "lumen-code" | "lumen-code-tabs" | "lumen-combobox" | "lumen-command" | "lumen-color-picker" | "lumen-context-menu" | "lumen-data-table" | "lumen-date-picker" | "lumen-date-range-picker" | "lumen-dialog" | "lumen-direction" | "lumen-drawer" | "lumen-dropdown-menu" | "lumen-empty" | "lumen-eyebrow" | "lumen-field" | "lumen-floating-badge" | "lumen-formatted-date" | "lumen-hover-card" | "lumen-icon" | "lumen-image" | "lumen-input" | "lumen-input-group" | "lumen-input-otp" | "lumen-number-field" | "lumen-item" | "lumen-kbd" | "lumen-label" | "lumen-link" | "lumen-marker" | "lumen-menubar" | "lumen-message" | "lumen-message-scroller" | "lumen-native-select" | "lumen-navigation-menu" | "lumen-pagination" | "lumen-phone-input" | "lumen-pill" | "lumen-popover" | "lumen-progress" | "lumen-prose" | "lumen-radio-group" | "lumen-resizable" | "lumen-rich-text-editor" | "lumen-scroll-area" | "lumen-schedule" | "lumen-search-field" | "lumen-select" | "lumen-separator" | "lumen-sheet" | "lumen-sidebar" | "lumen-skeleton" | "lumen-skip-link" | "lumen-slider" | "lumen-sonner" | "lumen-spinner" | "lumen-switch" | "lumen-table" | "lumen-tabs" | "lumen-tag-group" | "lumen-textarea" | "lumen-theme-builder" | "lumen-theme-toggle" | "lumen-time-field" | "lumen-toast" | "lumen-toggle" | "lumen-toggle-group" | "lumen-tooltip" | "lumen-tree" | "lumen-tree-grid" | "lumen-typography" | "lumen-virtual-list" | "lumen-language-toggle" | "lumen-particles" | "lumen-animated-number" | "lumen-reveal-group" | "lumen-scroll-reveal" | "lumen-stat" | "lumen-meter" | "lumen-note" | "lumen-rating" | "lumen-timeline" | "lumen-animated-logo" | "lumen-animated-portrait" | "lumen-button-link" | "lumen-cover-image" | "lumen-gradient-divider" | "lumen-stepper" | "lumen-file-upload" | "lumen-tour" | "lumen-anchor" | "lumen-segmented" | "lumen-toolbar" | "lumen-descriptions" | "lumen-popconfirm" | "lumen-transfer" | "lumen-cascader" | "lumen-tree-select" | "lumen-mentions" | "lumen-qr-code" | "lumen-watermark" | "lumen-affix" | "lumen-speed-dial", typeof LumenElement])[];
|
|
56
56
|
export declare const LumenAccordionElement: typeof LumenElement;
|
|
57
57
|
export declare const LumenAlertElement: typeof LumenElement;
|
|
58
58
|
export declare const LumenAlertDialogElement: typeof LumenElement;
|
|
@@ -73,6 +73,7 @@ export declare const LumenChartElement: typeof LumenElement;
|
|
|
73
73
|
export declare const LumenCheckboxElement: typeof LumenElement;
|
|
74
74
|
export declare const LumenCollapsibleElement: typeof LumenElement;
|
|
75
75
|
export declare const LumenCodeElement: typeof LumenElement;
|
|
76
|
+
export declare const LumenCodeTabsElement: typeof LumenElement;
|
|
76
77
|
export declare const LumenComboboxElement: typeof LumenElement;
|
|
77
78
|
export declare const LumenCommandElement: typeof LumenElement;
|
|
78
79
|
export declare const LumenColorPickerElement: typeof LumenElement;
|
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,12 +195,20 @@ 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',
|
|
193
204
|
defaults: { 'data-code-theme': 'auto', variant: 'inline' },
|
|
194
205
|
tagName: 'lumen-code'
|
|
195
206
|
},
|
|
207
|
+
CodeTabs: {
|
|
208
|
+
baseClassName: 'ui-code-tabs',
|
|
209
|
+
defaults: { 'data-ui-tabs': '' },
|
|
210
|
+
tagName: 'lumen-code-tabs'
|
|
211
|
+
},
|
|
196
212
|
Combobox: { baseClassName: 'ui-combobox', defaults: { 'data-ui-combobox': '' }, tagName: 'lumen-combobox' },
|
|
197
213
|
Command: { attributeClasses: glassAttributeClasses('ui-command--glass'), baseClassName: 'ui-command', defaults: { 'data-ui-command': '' }, tagName: 'lumen-command' },
|
|
198
214
|
ColorPicker: { baseClassName: 'ui-color-picker', defaults: { type: 'color' }, tagName: 'lumen-color-picker' },
|
|
@@ -216,10 +232,11 @@ const elementConfigs = {
|
|
|
216
232
|
Dialog: {
|
|
217
233
|
attributeClasses: {
|
|
218
234
|
glass: { strong: 'ui-dialog--glass ui-glass-strong', subtle: 'ui-dialog--glass ui-glass-subtle', true: 'ui-dialog--glass' },
|
|
235
|
+
layout: { fullscreen: 'ui-dialog--fullscreen' },
|
|
219
236
|
surface: { glass: 'ui-dialog--glass' }
|
|
220
237
|
},
|
|
221
238
|
baseClassName: 'ui-dialog',
|
|
222
|
-
defaults: { 'data-ui-dialog': '', surface: 'default' },
|
|
239
|
+
defaults: { 'data-ui-dialog': '', layout: 'centered', surface: 'default' },
|
|
223
240
|
tagName: 'lumen-dialog'
|
|
224
241
|
},
|
|
225
242
|
Direction: { baseClassName: 'ui-direction', defaults: { dir: 'ltr' }, tagName: 'lumen-direction' },
|
|
@@ -281,7 +298,7 @@ const elementConfigs = {
|
|
|
281
298
|
Item: { attributeClasses: glassAttributeClasses('ui-item--glass'), baseClassName: 'ui-item', tagName: 'lumen-item' },
|
|
282
299
|
Kbd: { baseClassName: 'ui-kbd', tagName: 'lumen-kbd' },
|
|
283
300
|
Label: { baseClassName: 'ui-label', tagName: 'lumen-label' },
|
|
284
|
-
Link: { baseClassName: 'ui-link', tagName: 'lumen-link' },
|
|
301
|
+
Link: { attributeClasses: { variant: { inherit: 'ui-link--inherit' } }, baseClassName: 'ui-link', tagName: 'lumen-link' },
|
|
285
302
|
Marker: {
|
|
286
303
|
attributeClasses: {
|
|
287
304
|
variant: {
|
|
@@ -319,7 +336,8 @@ const elementConfigs = {
|
|
|
319
336
|
NavigationMenu: {
|
|
320
337
|
attributeClasses: {
|
|
321
338
|
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' }
|
|
339
|
+
surface: { glass: 'ui-navigation-menu--glass' },
|
|
340
|
+
variant: { unstyled: 'ui-navigation-menu--unstyled' }
|
|
323
341
|
},
|
|
324
342
|
baseClassName: 'ui-navigation-menu',
|
|
325
343
|
defaults: { 'data-ui-navigation-menu': '', surface: 'default' },
|
|
@@ -381,7 +399,8 @@ const elementConfigs = {
|
|
|
381
399
|
Sidebar: {
|
|
382
400
|
attributeClasses: {
|
|
383
401
|
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' }
|
|
402
|
+
surface: { glass: 'ui-sidebar--glass' },
|
|
403
|
+
variant: { unstyled: 'ui-sidebar--unstyled' }
|
|
385
404
|
},
|
|
386
405
|
baseClassName: 'ui-sidebar',
|
|
387
406
|
defaults: { surface: 'default' },
|
|
@@ -419,7 +438,6 @@ const elementConfigs = {
|
|
|
419
438
|
tagName: 'lumen-toast'
|
|
420
439
|
},
|
|
421
440
|
Toggle: {
|
|
422
|
-
attributeClasses: { pressed: { true: 'ui-toggle--pressed' } },
|
|
423
441
|
baseClassName: 'ui-toggle',
|
|
424
442
|
defaults: { 'aria-pressed': 'false', 'data-ui-toggle': '', role: 'button', tabindex: '0' },
|
|
425
443
|
role: 'button',
|
|
@@ -498,7 +516,10 @@ const elementConfigs = {
|
|
|
498
516
|
AnimatedLogo: { baseClassName: 'ui-animated-logo', tagName: 'lumen-animated-logo' },
|
|
499
517
|
AnimatedPortrait: { baseClassName: 'ui-animated-portrait', tagName: 'lumen-animated-portrait' },
|
|
500
518
|
ButtonLink: {
|
|
501
|
-
attributeClasses: {
|
|
519
|
+
attributeClasses: {
|
|
520
|
+
shape: { icon: 'ui-button-link--icon' },
|
|
521
|
+
variant: { unstyled: 'ui-button-link--unstyled' }
|
|
522
|
+
},
|
|
502
523
|
baseClassName: 'ui-button-link',
|
|
503
524
|
tagName: 'lumen-button-link'
|
|
504
525
|
},
|
|
@@ -3070,10 +3091,10 @@ class LumenDataTableBehaviorElement extends LumenElement {
|
|
|
3070
3091
|
selectAll.indeterminate = selectedValues.length > 0 && selectedValues.length < rows.length;
|
|
3071
3092
|
this.syncSelectionInputs(selectedValues);
|
|
3072
3093
|
if (dispatch) {
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
}));
|
|
3094
|
+
const detail = { values: selectedValues };
|
|
3095
|
+
this.dispatchEvent(new CustomEvent('ui:data-table-selection-change', { bubbles: true, detail }));
|
|
3096
|
+
// Deprecated compatibility event. Remove in Lumen 1.0.
|
|
3097
|
+
this.dispatchEvent(new CustomEvent('ui:datatable-selection-change', { bubbles: true, detail }));
|
|
3077
3098
|
}
|
|
3078
3099
|
}
|
|
3079
3100
|
syncSelectionInputs(selectedValues) {
|
|
@@ -3461,6 +3482,444 @@ class LumenToastBehaviorElement extends LumenElement {
|
|
|
3461
3482
|
clearToastTimer(this);
|
|
3462
3483
|
}
|
|
3463
3484
|
}
|
|
3485
|
+
class LumenFileUploadBehaviorElement extends LumenElement {
|
|
3486
|
+
abortController;
|
|
3487
|
+
connectedCallback() {
|
|
3488
|
+
super.connectedCallback();
|
|
3489
|
+
this.abortController?.abort();
|
|
3490
|
+
this.abortController = new AbortController();
|
|
3491
|
+
const input = this.querySelector('[data-ui-file-upload-input]');
|
|
3492
|
+
if (!input)
|
|
3493
|
+
return;
|
|
3494
|
+
const files = this.querySelector('[data-ui-file-upload-files]');
|
|
3495
|
+
const renderFiles = () => {
|
|
3496
|
+
const selectedFiles = input.files ? [...input.files] : [];
|
|
3497
|
+
this.dataset.state = selectedFiles.length > 0 ? 'selected' : 'idle';
|
|
3498
|
+
if (!files)
|
|
3499
|
+
return;
|
|
3500
|
+
if (selectedFiles.length === 1) {
|
|
3501
|
+
files.textContent = selectedFiles[0]?.name ?? '';
|
|
3502
|
+
}
|
|
3503
|
+
else {
|
|
3504
|
+
files.textContent = selectedFiles.length > 1
|
|
3505
|
+
? `${selectedFiles.length} files selected`
|
|
3506
|
+
: '';
|
|
3507
|
+
}
|
|
3508
|
+
};
|
|
3509
|
+
input.addEventListener('change', renderFiles, { signal: this.abortController.signal });
|
|
3510
|
+
this.addEventListener('dragover', event => {
|
|
3511
|
+
if (input.disabled)
|
|
3512
|
+
return;
|
|
3513
|
+
event.preventDefault();
|
|
3514
|
+
this.dataset.state = 'drag-over';
|
|
3515
|
+
}, { signal: this.abortController.signal });
|
|
3516
|
+
this.addEventListener('dragleave', event => {
|
|
3517
|
+
if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
|
|
3518
|
+
return;
|
|
3519
|
+
this.dataset.state = input.files?.length ? 'selected' : 'idle';
|
|
3520
|
+
}, { signal: this.abortController.signal });
|
|
3521
|
+
this.addEventListener('drop', event => {
|
|
3522
|
+
if (input.disabled)
|
|
3523
|
+
return;
|
|
3524
|
+
event.preventDefault();
|
|
3525
|
+
if (event.dataTransfer) {
|
|
3526
|
+
input.files = event.dataTransfer.files;
|
|
3527
|
+
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
3528
|
+
}
|
|
3529
|
+
}, { signal: this.abortController.signal });
|
|
3530
|
+
renderFiles();
|
|
3531
|
+
}
|
|
3532
|
+
disconnectedCallback() {
|
|
3533
|
+
this.abortController?.abort();
|
|
3534
|
+
this.abortController = undefined;
|
|
3535
|
+
}
|
|
3536
|
+
}
|
|
3537
|
+
class LumenAnchorBehaviorElement extends LumenElement {
|
|
3538
|
+
observer;
|
|
3539
|
+
connectedCallback() {
|
|
3540
|
+
super.connectedCallback();
|
|
3541
|
+
this.observer?.disconnect();
|
|
3542
|
+
if (typeof IntersectionObserver === 'undefined')
|
|
3543
|
+
return;
|
|
3544
|
+
const links = [...this.querySelectorAll('a[href^="#"]')];
|
|
3545
|
+
const byId = new Map();
|
|
3546
|
+
const targets = [];
|
|
3547
|
+
for (const link of links) {
|
|
3548
|
+
const id = decodeURIComponent(link.getAttribute('href')?.slice(1) ?? '');
|
|
3549
|
+
const target = id ? document.getElementById(id) : null;
|
|
3550
|
+
if (target) {
|
|
3551
|
+
byId.set(id, link);
|
|
3552
|
+
targets.push(target);
|
|
3553
|
+
}
|
|
3554
|
+
}
|
|
3555
|
+
if (!targets.length)
|
|
3556
|
+
return;
|
|
3557
|
+
this.observer = new IntersectionObserver(entries => {
|
|
3558
|
+
const visibleEntry = entries.find(entry => entry.isIntersecting);
|
|
3559
|
+
if (!visibleEntry)
|
|
3560
|
+
return;
|
|
3561
|
+
for (const link of links) {
|
|
3562
|
+
link.dataset.active = 'false';
|
|
3563
|
+
}
|
|
3564
|
+
const active = byId.get(visibleEntry.target.id);
|
|
3565
|
+
if (active)
|
|
3566
|
+
active.dataset.active = 'true';
|
|
3567
|
+
}, { rootMargin: '0px 0px -70% 0px', threshold: 0 });
|
|
3568
|
+
for (const target of targets) {
|
|
3569
|
+
this.observer.observe(target);
|
|
3570
|
+
}
|
|
3571
|
+
}
|
|
3572
|
+
disconnectedCallback() {
|
|
3573
|
+
this.observer?.disconnect();
|
|
3574
|
+
this.observer = undefined;
|
|
3575
|
+
}
|
|
3576
|
+
}
|
|
3577
|
+
class LumenTourBehaviorElement extends LumenElement {
|
|
3578
|
+
abortController;
|
|
3579
|
+
opener = null;
|
|
3580
|
+
connectedCallback() {
|
|
3581
|
+
super.connectedCallback();
|
|
3582
|
+
this.abortController?.abort();
|
|
3583
|
+
this.abortController = new AbortController();
|
|
3584
|
+
const popover = this.querySelector('[data-ui-tour-popover]');
|
|
3585
|
+
const steps = [...this.querySelectorAll('[data-ui-tour-step]')];
|
|
3586
|
+
if (!popover || !steps.length)
|
|
3587
|
+
return;
|
|
3588
|
+
let index = 0;
|
|
3589
|
+
const positionStep = () => {
|
|
3590
|
+
const step = steps[index];
|
|
3591
|
+
if (!step)
|
|
3592
|
+
return;
|
|
3593
|
+
for (const [stepIndex, node] of steps.entries()) {
|
|
3594
|
+
node.hidden = stepIndex !== index;
|
|
3595
|
+
}
|
|
3596
|
+
const target = step.dataset.target
|
|
3597
|
+
? document.querySelector(step.dataset.target)
|
|
3598
|
+
: null;
|
|
3599
|
+
if (target) {
|
|
3600
|
+
const rect = target.getBoundingClientRect();
|
|
3601
|
+
popover.style.top = `${rect.bottom + 8}px`;
|
|
3602
|
+
popover.style.left = `${rect.left}px`;
|
|
3603
|
+
}
|
|
3604
|
+
};
|
|
3605
|
+
const open = () => {
|
|
3606
|
+
this.hidden = false;
|
|
3607
|
+
index = 0;
|
|
3608
|
+
positionStep();
|
|
3609
|
+
};
|
|
3610
|
+
const close = () => {
|
|
3611
|
+
this.hidden = true;
|
|
3612
|
+
};
|
|
3613
|
+
this.addEventListener('click', event => {
|
|
3614
|
+
const target = event.target;
|
|
3615
|
+
if (!(target instanceof HTMLElement))
|
|
3616
|
+
return;
|
|
3617
|
+
if (target.closest('[data-ui-tour-next]')) {
|
|
3618
|
+
if (index < steps.length - 1) {
|
|
3619
|
+
index += 1;
|
|
3620
|
+
positionStep();
|
|
3621
|
+
}
|
|
3622
|
+
else {
|
|
3623
|
+
close();
|
|
3624
|
+
}
|
|
3625
|
+
}
|
|
3626
|
+
else if (target.closest('[data-ui-tour-prev]')) {
|
|
3627
|
+
if (index > 0) {
|
|
3628
|
+
index -= 1;
|
|
3629
|
+
positionStep();
|
|
3630
|
+
}
|
|
3631
|
+
}
|
|
3632
|
+
else if (target.closest('[data-ui-tour-close]') || target.hasAttribute('data-ui-tour-backdrop')) {
|
|
3633
|
+
close();
|
|
3634
|
+
}
|
|
3635
|
+
}, { signal: this.abortController.signal });
|
|
3636
|
+
this.opener = this.id
|
|
3637
|
+
? document.querySelector(`[data-ui-tour-open="#${this.id}"]`)
|
|
3638
|
+
: null;
|
|
3639
|
+
this.opener?.addEventListener('click', open, { signal: this.abortController.signal });
|
|
3640
|
+
const lumenWindow = window;
|
|
3641
|
+
lumenWindow.LumenTours ??= {};
|
|
3642
|
+
if (this.id)
|
|
3643
|
+
lumenWindow.LumenTours[this.id] = open;
|
|
3644
|
+
}
|
|
3645
|
+
disconnectedCallback() {
|
|
3646
|
+
this.abortController?.abort();
|
|
3647
|
+
this.abortController = undefined;
|
|
3648
|
+
this.opener = null;
|
|
3649
|
+
const lumenWindow = window;
|
|
3650
|
+
if (this.id && lumenWindow.LumenTours)
|
|
3651
|
+
Reflect.deleteProperty(lumenWindow.LumenTours, this.id);
|
|
3652
|
+
}
|
|
3653
|
+
}
|
|
3654
|
+
class LumenTransferBehaviorElement extends LumenElement {
|
|
3655
|
+
abortController;
|
|
3656
|
+
connectedCallback() {
|
|
3657
|
+
super.connectedCallback();
|
|
3658
|
+
this.abortController?.abort();
|
|
3659
|
+
this.abortController = new AbortController();
|
|
3660
|
+
const lists = new Map();
|
|
3661
|
+
for (const list of this.querySelectorAll('[data-ui-transfer-list]')) {
|
|
3662
|
+
if (list.dataset.side)
|
|
3663
|
+
lists.set(list.dataset.side, list);
|
|
3664
|
+
}
|
|
3665
|
+
const move = (fromSide, toSide) => {
|
|
3666
|
+
const from = lists.get(fromSide);
|
|
3667
|
+
const to = lists.get(toSide);
|
|
3668
|
+
if (!from || !to)
|
|
3669
|
+
return;
|
|
3670
|
+
const moved = [];
|
|
3671
|
+
for (const checkbox of from.querySelectorAll('[data-ui-transfer-item]')) {
|
|
3672
|
+
if (!checkbox.checked)
|
|
3673
|
+
continue;
|
|
3674
|
+
const item = checkbox.closest('.ui-transfer__item');
|
|
3675
|
+
if (item) {
|
|
3676
|
+
checkbox.checked = false;
|
|
3677
|
+
to.append(item);
|
|
3678
|
+
moved.push(checkbox.value);
|
|
3679
|
+
}
|
|
3680
|
+
}
|
|
3681
|
+
if (moved.length) {
|
|
3682
|
+
this.dispatchEvent(new CustomEvent('ui:transfer-change', {
|
|
3683
|
+
bubbles: true,
|
|
3684
|
+
detail: { from: fromSide, to: toSide, values: moved }
|
|
3685
|
+
}));
|
|
3686
|
+
}
|
|
3687
|
+
};
|
|
3688
|
+
for (const button of this.querySelectorAll('[data-ui-transfer-move]')) {
|
|
3689
|
+
button.addEventListener('click', () => {
|
|
3690
|
+
if (button.dataset.uiTransferMove === 'target') {
|
|
3691
|
+
move('source', 'target');
|
|
3692
|
+
}
|
|
3693
|
+
else if (button.dataset.uiTransferMove === 'source') {
|
|
3694
|
+
move('target', 'source');
|
|
3695
|
+
}
|
|
3696
|
+
}, { signal: this.abortController.signal });
|
|
3697
|
+
}
|
|
3698
|
+
}
|
|
3699
|
+
disconnectedCallback() {
|
|
3700
|
+
this.abortController?.abort();
|
|
3701
|
+
this.abortController = undefined;
|
|
3702
|
+
}
|
|
3703
|
+
}
|
|
3704
|
+
class LumenMentionsBehaviorElement extends LumenElement {
|
|
3705
|
+
abortController;
|
|
3706
|
+
closeTimer;
|
|
3707
|
+
connectedCallback() {
|
|
3708
|
+
super.connectedCallback();
|
|
3709
|
+
this.abortController?.abort();
|
|
3710
|
+
this.abortController = new AbortController();
|
|
3711
|
+
const input = this.querySelector('[data-ui-mentions-input]');
|
|
3712
|
+
const list = this.querySelector('[data-ui-mentions-list]');
|
|
3713
|
+
if (!input || !list)
|
|
3714
|
+
return;
|
|
3715
|
+
const trigger = this.dataset.uiMentionsTrigger ?? '@';
|
|
3716
|
+
const escapedTrigger = trigger.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
3717
|
+
const options = [...list.querySelectorAll('[data-ui-mentions-option]')];
|
|
3718
|
+
const close = () => {
|
|
3719
|
+
list.hidden = true;
|
|
3720
|
+
};
|
|
3721
|
+
const filter = () => {
|
|
3722
|
+
const caret = input.selectionStart;
|
|
3723
|
+
const match = new RegExp(`${escapedTrigger}(\\w*)$`).exec(input.value.slice(0, caret));
|
|
3724
|
+
if (!match) {
|
|
3725
|
+
close();
|
|
3726
|
+
return;
|
|
3727
|
+
}
|
|
3728
|
+
const query = (match[1] ?? '').toLowerCase();
|
|
3729
|
+
let visibleCount = 0;
|
|
3730
|
+
for (const option of options) {
|
|
3731
|
+
const visible = (option.dataset.value ?? '').toLowerCase().startsWith(query);
|
|
3732
|
+
option.hidden = !visible;
|
|
3733
|
+
if (visible)
|
|
3734
|
+
visibleCount += 1;
|
|
3735
|
+
}
|
|
3736
|
+
list.hidden = visibleCount === 0;
|
|
3737
|
+
};
|
|
3738
|
+
const insert = (value) => {
|
|
3739
|
+
const caret = input.selectionStart;
|
|
3740
|
+
const before = input.value.slice(0, caret)
|
|
3741
|
+
.replace(new RegExp(`${escapedTrigger}\\w*$`), `${trigger}${value} `);
|
|
3742
|
+
input.value = before + input.value.slice(caret);
|
|
3743
|
+
input.focus();
|
|
3744
|
+
input.setSelectionRange(before.length, before.length);
|
|
3745
|
+
close();
|
|
3746
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
3747
|
+
};
|
|
3748
|
+
input.addEventListener('input', filter, { signal: this.abortController.signal });
|
|
3749
|
+
input.addEventListener('keyup', filter, { signal: this.abortController.signal });
|
|
3750
|
+
input.addEventListener('blur', () => {
|
|
3751
|
+
this.closeTimer = globalThis.setTimeout(close, 120);
|
|
3752
|
+
}, { signal: this.abortController.signal });
|
|
3753
|
+
for (const option of options) {
|
|
3754
|
+
option.addEventListener('mousedown', event => {
|
|
3755
|
+
event.preventDefault();
|
|
3756
|
+
insert(option.dataset.value ?? '');
|
|
3757
|
+
}, { signal: this.abortController.signal });
|
|
3758
|
+
}
|
|
3759
|
+
}
|
|
3760
|
+
disconnectedCallback() {
|
|
3761
|
+
this.abortController?.abort();
|
|
3762
|
+
this.abortController = undefined;
|
|
3763
|
+
if (this.closeTimer)
|
|
3764
|
+
globalThis.clearTimeout(this.closeTimer);
|
|
3765
|
+
this.closeTimer = undefined;
|
|
3766
|
+
}
|
|
3767
|
+
}
|
|
3768
|
+
const setupSelectionDisclosure = (root, signal, rovingPanel = true) => {
|
|
3769
|
+
const trigger = root.querySelector('[data-ui-trigger]');
|
|
3770
|
+
const panel = root.querySelector('[data-ui-panel]');
|
|
3771
|
+
if (!trigger || !panel)
|
|
3772
|
+
return undefined;
|
|
3773
|
+
const close = () => { setDisclosureOpen(trigger, panel, false); };
|
|
3774
|
+
setDisclosureOpen(trigger, panel, trigger.getAttribute('aria-expanded') === 'true');
|
|
3775
|
+
trigger.addEventListener('click', () => {
|
|
3776
|
+
setDisclosureOpen(trigger, panel, trigger.getAttribute('aria-expanded') !== 'true');
|
|
3777
|
+
}, { signal });
|
|
3778
|
+
trigger.addEventListener('keydown', event => {
|
|
3779
|
+
if (!['ArrowDown', 'Enter', ' '].includes(event.key))
|
|
3780
|
+
return;
|
|
3781
|
+
event.preventDefault();
|
|
3782
|
+
setDisclosureOpen(trigger, panel, true);
|
|
3783
|
+
getFocusable(panel)[0]?.focus();
|
|
3784
|
+
}, { signal });
|
|
3785
|
+
panel.addEventListener('keydown', event => {
|
|
3786
|
+
if (event.key === 'Escape') {
|
|
3787
|
+
event.preventDefault();
|
|
3788
|
+
close();
|
|
3789
|
+
trigger.focus({ preventScroll: true });
|
|
3790
|
+
return;
|
|
3791
|
+
}
|
|
3792
|
+
if (!rovingPanel || !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
|
|
3793
|
+
return;
|
|
3794
|
+
const items = getFocusable(panel);
|
|
3795
|
+
if (!items.length)
|
|
3796
|
+
return;
|
|
3797
|
+
event.preventDefault();
|
|
3798
|
+
const currentIndex = Math.max(0, items.indexOf(document.activeElement));
|
|
3799
|
+
items[getLoopedIndex(event.key, currentIndex, items.length, ['ArrowDown'])]?.focus();
|
|
3800
|
+
}, { signal });
|
|
3801
|
+
document.addEventListener('pointerdown', event => {
|
|
3802
|
+
const target = getOwnedTarget(event);
|
|
3803
|
+
if (!target || root.contains(target))
|
|
3804
|
+
return;
|
|
3805
|
+
close();
|
|
3806
|
+
}, { signal });
|
|
3807
|
+
return { close, panel, trigger };
|
|
3808
|
+
};
|
|
3809
|
+
class LumenCascaderBehaviorElement extends LumenElement {
|
|
3810
|
+
abortController;
|
|
3811
|
+
connectedCallback() {
|
|
3812
|
+
super.connectedCallback();
|
|
3813
|
+
this.abortController?.abort();
|
|
3814
|
+
this.abortController = new AbortController();
|
|
3815
|
+
const disclosure = setupSelectionDisclosure(this, this.abortController.signal, false);
|
|
3816
|
+
if (!disclosure)
|
|
3817
|
+
return;
|
|
3818
|
+
const valueLabel = this.querySelector('[data-ui-cascader-value]');
|
|
3819
|
+
const input = this.querySelector('[data-ui-cascader-input]');
|
|
3820
|
+
const columns = [...this.querySelectorAll('.ui-cascader__column')];
|
|
3821
|
+
for (const option of this.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3822
|
+
option.addEventListener('click', () => {
|
|
3823
|
+
const column = option.closest('.ui-cascader__column');
|
|
3824
|
+
if (column) {
|
|
3825
|
+
const columnIndex = columns.indexOf(column);
|
|
3826
|
+
for (const descendant of columns.slice(columnIndex + 1)) {
|
|
3827
|
+
descendant.hidden = true;
|
|
3828
|
+
for (const descendantOption of descendant.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3829
|
+
descendantOption.dataset.active = 'false';
|
|
3830
|
+
descendantOption.setAttribute('aria-selected', 'false');
|
|
3831
|
+
}
|
|
3832
|
+
}
|
|
3833
|
+
for (const sibling of column.querySelectorAll('[data-ui-cascader-option]')) {
|
|
3834
|
+
sibling.dataset.active = 'false';
|
|
3835
|
+
sibling.setAttribute('aria-selected', 'false');
|
|
3836
|
+
}
|
|
3837
|
+
}
|
|
3838
|
+
option.dataset.active = 'true';
|
|
3839
|
+
option.setAttribute('aria-selected', 'true');
|
|
3840
|
+
const next = option.dataset.uiCascaderNext
|
|
3841
|
+
? this.querySelector(option.dataset.uiCascaderNext)
|
|
3842
|
+
: null;
|
|
3843
|
+
if (next) {
|
|
3844
|
+
next.hidden = false;
|
|
3845
|
+
return;
|
|
3846
|
+
}
|
|
3847
|
+
const value = option.dataset.value ?? option.textContent.trim();
|
|
3848
|
+
if (valueLabel)
|
|
3849
|
+
valueLabel.textContent = option.dataset.label ?? option.textContent.trim();
|
|
3850
|
+
if (input)
|
|
3851
|
+
input.value = value;
|
|
3852
|
+
disclosure.close();
|
|
3853
|
+
this.dispatchEvent(new CustomEvent('ui:cascader-change', { bubbles: true, detail: { value } }));
|
|
3854
|
+
}, { signal: this.abortController.signal });
|
|
3855
|
+
}
|
|
3856
|
+
disclosure.panel.addEventListener('keydown', event => {
|
|
3857
|
+
const target = event.target;
|
|
3858
|
+
if (!(target instanceof HTMLElement))
|
|
3859
|
+
return;
|
|
3860
|
+
const option = target.closest('[data-ui-cascader-option]');
|
|
3861
|
+
const column = option?.closest('.ui-cascader__column');
|
|
3862
|
+
if (!option || !column)
|
|
3863
|
+
return;
|
|
3864
|
+
const columnIndex = columns.indexOf(column);
|
|
3865
|
+
const options = [...column.querySelectorAll('[data-ui-cascader-option]')];
|
|
3866
|
+
if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
|
|
3867
|
+
event.preventDefault();
|
|
3868
|
+
options[getLoopedIndex(event.key, options.indexOf(option), options.length, ['ArrowDown'])]?.focus();
|
|
3869
|
+
}
|
|
3870
|
+
else if (event.key === 'ArrowRight') {
|
|
3871
|
+
const next = option.dataset.uiCascaderNext
|
|
3872
|
+
? this.querySelector(option.dataset.uiCascaderNext)
|
|
3873
|
+
: null;
|
|
3874
|
+
if (next) {
|
|
3875
|
+
event.preventDefault();
|
|
3876
|
+
option.click();
|
|
3877
|
+
next.querySelector('[data-ui-cascader-option]')?.focus();
|
|
3878
|
+
}
|
|
3879
|
+
}
|
|
3880
|
+
else if (event.key === 'ArrowLeft' && columnIndex > 0) {
|
|
3881
|
+
event.preventDefault();
|
|
3882
|
+
for (const descendant of columns.slice(columnIndex))
|
|
3883
|
+
descendant.hidden = true;
|
|
3884
|
+
columns.slice(0, columnIndex).reverse().find(candidate => !candidate.hidden)
|
|
3885
|
+
?.querySelector('[data-ui-cascader-option][data-active="true"]')
|
|
3886
|
+
?.focus();
|
|
3887
|
+
}
|
|
3888
|
+
}, { signal: this.abortController.signal });
|
|
3889
|
+
}
|
|
3890
|
+
disconnectedCallback() {
|
|
3891
|
+
this.abortController?.abort();
|
|
3892
|
+
this.abortController = undefined;
|
|
3893
|
+
}
|
|
3894
|
+
}
|
|
3895
|
+
class LumenTreeSelectBehaviorElement extends LumenElement {
|
|
3896
|
+
abortController;
|
|
3897
|
+
connectedCallback() {
|
|
3898
|
+
super.connectedCallback();
|
|
3899
|
+
this.abortController?.abort();
|
|
3900
|
+
this.abortController = new AbortController();
|
|
3901
|
+
const disclosure = setupSelectionDisclosure(this, this.abortController.signal);
|
|
3902
|
+
if (!disclosure)
|
|
3903
|
+
return;
|
|
3904
|
+
const valueLabel = this.querySelector('[data-ui-tree-select-value]');
|
|
3905
|
+
const input = this.querySelector('[data-ui-tree-select-input]');
|
|
3906
|
+
for (const item of this.querySelectorAll('[data-ui-panel] [data-value]')) {
|
|
3907
|
+
item.addEventListener('click', () => {
|
|
3908
|
+
const value = item.dataset.value ?? '';
|
|
3909
|
+
if (valueLabel)
|
|
3910
|
+
valueLabel.textContent = item.textContent.trim();
|
|
3911
|
+
if (input)
|
|
3912
|
+
input.value = value;
|
|
3913
|
+
disclosure.close();
|
|
3914
|
+
this.dispatchEvent(new CustomEvent('ui:tree-select-change', { bubbles: true, detail: { value } }));
|
|
3915
|
+
}, { signal: this.abortController.signal });
|
|
3916
|
+
}
|
|
3917
|
+
}
|
|
3918
|
+
disconnectedCallback() {
|
|
3919
|
+
this.abortController?.abort();
|
|
3920
|
+
this.abortController = undefined;
|
|
3921
|
+
}
|
|
3922
|
+
}
|
|
3464
3923
|
class LumenBackToTopBehaviorElement extends LumenElement {
|
|
3465
3924
|
connectedCallback() {
|
|
3466
3925
|
super.connectedCallback();
|
|
@@ -3725,13 +4184,18 @@ const createLumenBehaviorElementClass = (BaseElement, config) => class extends B
|
|
|
3725
4184
|
};
|
|
3726
4185
|
const behaviorElementClasses = {
|
|
3727
4186
|
AlertDialog: LumenDialogBehaviorElement,
|
|
4187
|
+
Anchor: LumenAnchorBehaviorElement,
|
|
3728
4188
|
AnimatedNumber: LumenAnimatedNumberBehaviorElement,
|
|
3729
4189
|
BackToTop: LumenBackToTopBehaviorElement,
|
|
4190
|
+
Cascader: LumenCascaderBehaviorElement,
|
|
4191
|
+
CodeTabs: LumenTabsBehaviorElement,
|
|
3730
4192
|
DataTable: LumenDataTableBehaviorElement,
|
|
3731
4193
|
Dialog: LumenDialogBehaviorElement,
|
|
3732
4194
|
DropdownMenu: LumenDisclosureBehaviorElement,
|
|
4195
|
+
FileUpload: LumenFileUploadBehaviorElement,
|
|
3733
4196
|
Icon: LumenIconBehaviorElement,
|
|
3734
4197
|
LanguageToggle: LumenLanguageToggleBehaviorElement,
|
|
4198
|
+
Mentions: LumenMentionsBehaviorElement,
|
|
3735
4199
|
Particles: LumenParticlesBehaviorElement,
|
|
3736
4200
|
Popover: LumenDisclosureBehaviorElement,
|
|
3737
4201
|
Rating: LumenRatingBehaviorElement,
|
|
@@ -3743,6 +4207,9 @@ const behaviorElementClasses = {
|
|
|
3743
4207
|
ThemeBuilder: LumenThemeBuilderBehaviorElement,
|
|
3744
4208
|
ThemeToggle: LumenThemeToggleBehaviorElement,
|
|
3745
4209
|
Toast: LumenToastBehaviorElement,
|
|
4210
|
+
Tour: LumenTourBehaviorElement,
|
|
4211
|
+
Transfer: LumenTransferBehaviorElement,
|
|
4212
|
+
TreeSelect: LumenTreeSelectBehaviorElement,
|
|
3746
4213
|
Tooltip: LumenTooltipBehaviorElement,
|
|
3747
4214
|
VirtualList: LumenVirtualListBehaviorElement
|
|
3748
4215
|
};
|
|
@@ -3812,6 +4279,7 @@ export const LumenChartElement = elementClasses.Chart;
|
|
|
3812
4279
|
export const LumenCheckboxElement = elementClasses.Checkbox;
|
|
3813
4280
|
export const LumenCollapsibleElement = elementClasses.Collapsible;
|
|
3814
4281
|
export const LumenCodeElement = elementClasses.Code;
|
|
4282
|
+
export const LumenCodeTabsElement = elementClasses.CodeTabs;
|
|
3815
4283
|
export const LumenComboboxElement = elementClasses.Combobox;
|
|
3816
4284
|
export const LumenCommandElement = elementClasses.Command;
|
|
3817
4285
|
export const LumenColorPickerElement = elementClasses.ColorPicker;
|
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.3.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.3.0",
|
|
39
|
+
"@santi020k/lumen-core": "^0.3.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",
|