@vollowx/seele 0.11.2 → 0.12.2
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/custom-elements.json +1 -1396
- package/package.json +8 -8
- package/src/all.js +1 -0
- package/src/base/autocomplete.js +188 -0
- package/src/base/controllers/list-controller.js +36 -16
- package/src/base/input.js +8 -8
- package/src/base/list.js +245 -0
- package/src/base/menu.js +13 -31
- package/src/base/select.js +2 -0
- package/src/m3/autocomplete/autocomplete-styles.css.js +2 -0
- package/src/m3/autocomplete/autocomplete.js +37 -0
- package/src/m3/focus-ring/focus-ring-styles.css.js +1 -1
- package/src/m3/list/list-item-styles.css.js +1 -1
- package/src/m3/list/list-styles.css.js +1 -1
- package/src/m3/list/list.js +11 -2
package/src/base/menu.js
CHANGED
|
@@ -16,8 +16,6 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
16
16
|
* @fires {Event} close - Fires when the menu is closed.
|
|
17
17
|
* @fires {MenuSelectEvent} select - Fires when an item is selected.
|
|
18
18
|
* @fires {MenuItemFocusEvent} item-focus - Fires when an item is focused
|
|
19
|
-
*
|
|
20
|
-
* FIXME: aria-activedescendant may not work in and out shadow DOM
|
|
21
19
|
*/ export class Menu extends Base {
|
|
22
20
|
get $items() {
|
|
23
21
|
return this.listController.items || [];
|
|
@@ -74,6 +72,9 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
74
72
|
}
|
|
75
73
|
});
|
|
76
74
|
} else {
|
|
75
|
+
if (!this.noFocusControl) {
|
|
76
|
+
this.$menu.ariaActiveDescendantElement = null;
|
|
77
|
+
}
|
|
77
78
|
this.dispatchEvent(new Event('close', {
|
|
78
79
|
bubbles: true,
|
|
79
80
|
composed: true
|
|
@@ -122,7 +123,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
122
123
|
bubbles: true,
|
|
123
124
|
composed: true
|
|
124
125
|
}));
|
|
125
|
-
if (this.
|
|
126
|
+
if (this.keepOpenSelect) return;
|
|
126
127
|
this.open = false;
|
|
127
128
|
}
|
|
128
129
|
return;
|
|
@@ -165,7 +166,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
165
166
|
bubbles: true,
|
|
166
167
|
composed: true
|
|
167
168
|
}));
|
|
168
|
-
if (!this.
|
|
169
|
+
if (!this.keepOpenSelect) this.open = false;
|
|
169
170
|
}
|
|
170
171
|
get currentIndex() {
|
|
171
172
|
return this.listController?.currentIndex;
|
|
@@ -189,7 +190,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
189
190
|
super(...args), this._possibleItemTags = [], this._durations = {
|
|
190
191
|
show: 0,
|
|
191
192
|
hide: 0
|
|
192
|
-
}, this._scrollPadding = 0, this.type = 'menu', this.open = false, this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenBlur = false, this.
|
|
193
|
+
}, this._scrollPadding = 0, this.type = 'menu', this.open = false, this.quick = false, this.offset = 0, this.align = 'bottom-start', this.alignStrategy = 'absolute', this.keepOpenBlur = false, this.keepOpenSelect = false, this.keepOpenClickAway = false, this.noFocusControl = false, this.tabIndex = 0, this.$lastFocused = null, this.popoverController = new PopoverController(this, {
|
|
193
194
|
popover: ()=>this.$menu,
|
|
194
195
|
trigger: ()=>this.$control,
|
|
195
196
|
positioning: {
|
|
@@ -206,14 +207,17 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
|
|
|
206
207
|
if (!this.keepOpenClickAway) this.open = false;
|
|
207
208
|
}
|
|
208
209
|
}), this.listController = new ListController(this, {
|
|
209
|
-
isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled'),
|
|
210
|
+
isItem: (item)=>this._possibleItemTags.includes(item.tagName.toLowerCase()) && !item.hasAttribute('disabled') && !item.hidden,
|
|
210
211
|
getPossibleItems: ()=>this.slotItems,
|
|
211
212
|
blurItem: (item)=>{
|
|
213
|
+
console.log(item);
|
|
212
214
|
item.focused = false;
|
|
213
215
|
},
|
|
214
216
|
focusItem: (item)=>{
|
|
215
217
|
item.focused = true;
|
|
216
|
-
if (!this.noFocusControl)
|
|
218
|
+
if (!this.noFocusControl) {
|
|
219
|
+
this.$menu.ariaActiveDescendantElement = item;
|
|
220
|
+
}
|
|
217
221
|
scrollItemIntoView(this.$menu, item, this._scrollPadding);
|
|
218
222
|
this.dispatchEvent(new CustomEvent('item-focus', {
|
|
219
223
|
detail: {
|
|
@@ -267,21 +271,15 @@ _ts_decorate([
|
|
|
267
271
|
_ts_decorate([
|
|
268
272
|
property({
|
|
269
273
|
type: Boolean,
|
|
270
|
-
attribute: 'keep-open-
|
|
274
|
+
attribute: 'keep-open-select'
|
|
271
275
|
})
|
|
272
|
-
], Menu.prototype, "
|
|
276
|
+
], Menu.prototype, "keepOpenSelect", void 0);
|
|
273
277
|
_ts_decorate([
|
|
274
278
|
property({
|
|
275
279
|
type: Boolean,
|
|
276
280
|
attribute: 'keep-open-click-away'
|
|
277
281
|
})
|
|
278
282
|
], Menu.prototype, "keepOpenClickAway", void 0);
|
|
279
|
-
_ts_decorate([
|
|
280
|
-
property({
|
|
281
|
-
type: Boolean,
|
|
282
|
-
attribute: 'no-list-control'
|
|
283
|
-
})
|
|
284
|
-
], Menu.prototype, "noListControl", void 0);
|
|
285
283
|
_ts_decorate([
|
|
286
284
|
property({
|
|
287
285
|
type: Boolean,
|
|
@@ -361,22 +359,6 @@ export function getActionFromKey(event, menuOpen) {
|
|
|
361
359
|
}
|
|
362
360
|
return undefined;
|
|
363
361
|
}
|
|
364
|
-
export function getIndexByLetter(options, filter, startIndex = 0) {
|
|
365
|
-
const orderedOptions = [
|
|
366
|
-
...options.slice(startIndex),
|
|
367
|
-
...options.slice(0, startIndex)
|
|
368
|
-
];
|
|
369
|
-
const firstMatch = filterOptions(orderedOptions, filter)[0];
|
|
370
|
-
const allSameLetter = (array)=>array.every((letter)=>letter === array[0]);
|
|
371
|
-
if (firstMatch) {
|
|
372
|
-
return options.indexOf(firstMatch);
|
|
373
|
-
} else if (allSameLetter(filter.split(''))) {
|
|
374
|
-
const matches = filterOptions(orderedOptions, filter[0]);
|
|
375
|
-
return options.indexOf(matches[0]);
|
|
376
|
-
} else {
|
|
377
|
-
return -1;
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
362
|
export function getUpdatedIndex(currentIndex, maxIndex, action) {
|
|
381
363
|
const pageSize = 10;
|
|
382
364
|
switch(action){
|
package/src/base/select.js
CHANGED
|
@@ -150,6 +150,8 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
|
|
|
150
150
|
*/ handleFieldKeydown(event) {
|
|
151
151
|
if (this.disabled) return;
|
|
152
152
|
const eventClone = new KeyboardEvent(event.type, event);
|
|
153
|
+
eventClone.preventDefault = ()=>event.preventDefault();
|
|
154
|
+
eventClone.stopPropagation = ()=>event.stopPropagation();
|
|
153
155
|
this.$menu.$menu.dispatchEvent(eventClone);
|
|
154
156
|
}
|
|
155
157
|
handleMenuSelect(event) {
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import { Autocomplete } from '../../base/autocomplete.js';
|
|
5
|
+
import { autocompleteStyles } from './autocomplete-styles.css.js';
|
|
6
|
+
export class M3Autocomplete extends Autocomplete {
|
|
7
|
+
static{
|
|
8
|
+
this.styles = [
|
|
9
|
+
autocompleteStyles
|
|
10
|
+
];
|
|
11
|
+
}
|
|
12
|
+
renderMenu() {
|
|
13
|
+
return html`
|
|
14
|
+
<md-menu
|
|
15
|
+
part="menu"
|
|
16
|
+
id="menu"
|
|
17
|
+
type="listbox"
|
|
18
|
+
data-tabindex="-1"
|
|
19
|
+
?quick="${this.quick}"
|
|
20
|
+
.offset=${this.offset}
|
|
21
|
+
.align=${this.align}
|
|
22
|
+
.alignStrategy=${this.alignStrategy}
|
|
23
|
+
?keep-open-select=${this.keepOpenSelect}
|
|
24
|
+
no-focus-control
|
|
25
|
+
?open=${this.open}
|
|
26
|
+
@open="${()=>this.open = true}"
|
|
27
|
+
@close="${()=>this.open = false}"
|
|
28
|
+
@select=${this.handleMenuSelect}
|
|
29
|
+
>
|
|
30
|
+
<slot @slotchange=${this.handleItemsSlotChange}></slot>
|
|
31
|
+
</md-menu>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
M3Autocomplete = _ts_decorate([
|
|
36
|
+
customElement('md-autocomplete')
|
|
37
|
+
], M3Autocomplete);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);
|
|
2
|
+
export const focusRingStyles = css`:host{animation-delay:0s, calc(var(--md-focus-ring-duration,.6s) * .25);animation-duration:calc(var(--md-focus-ring-duration,.6s) * .25), calc(var(--md-focus-ring-duration,.6s) * .75);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;animation-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){box-shadow:0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:calc(-1 * var(--md-focus-ring-outward-offset,2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){box-shadow:inset 0 0 0 var(--md-focus-ring-width,3px) currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{box-shadow:0 0}to{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes outward-shrink{0%{box-shadow:0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-grow{0%{box-shadow:inset 0 0}to{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@keyframes inward-shrink{0%{box-shadow:inset 0 0 0 var(--md-focus-ring-active-width,8px) currentColor}}@media (prefers-reduced-motion){:host{animation:none}}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:first-of-type){border-radius:12px 12px 4px 4px}:host(:last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;
|
|
2
|
+
export const listItemStyles = css`:host{--md-focus-ring-shape:12px;--md-focus-ring-inward-offset:-3px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:4px;outline:0;display:flex}:host(:not([hidden]):first-of-type){border-radius:12px 12px 4px 4px}:host(:not([hidden]):last-of-type){border-radius:4px 4px 12px 12px}:host(:state(selected)){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:12px}:host(:disabled){cursor:default;opacity:.3;pointer-events:none}md-item,md-item div[slot=container]{border-radius:inherit}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const listStyles = css`:host{box-sizing:border-box;flex-direction:column;display:flex}`;
|
|
2
|
+
export const listStyles = css`:host{min-width:112px;display:contents}[part=list]{box-sizing:border-box;height:inherit;max-height:inherit;max-width:inherit;min-width:inherit;-webkit-user-select:none;user-select:none;width:inherit;outline:0;flex-direction:column;gap:2px;padding:4px;display:flex;position:absolute;inset:auto;overflow-y:auto}`;
|
package/src/m3/list/list.js
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
2
|
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import { List } from '../../base/list.js';
|
|
4
4
|
import { listStyles } from './list-styles.css.js';
|
|
5
|
-
export class M3List extends
|
|
5
|
+
export class M3List extends List {
|
|
6
6
|
static{
|
|
7
|
+
// FIXME: Might cause a long list to scroll more than expected
|
|
8
|
+
// override readonly _scrollPadding = 4;
|
|
7
9
|
this.styles = [
|
|
8
10
|
listStyles
|
|
9
11
|
];
|
|
10
12
|
}
|
|
13
|
+
constructor(...args){
|
|
14
|
+
super(...args), this._possibleItemTags = [
|
|
15
|
+
'md-list-item',
|
|
16
|
+
'md-list-item-checkbox',
|
|
17
|
+
'md-list-item-radio'
|
|
18
|
+
];
|
|
19
|
+
}
|
|
11
20
|
}
|
|
12
21
|
M3List = _ts_decorate([
|
|
13
22
|
customElement('md-list')
|