kopia lustrzana https://github.com/shoelace-style/shoelace
fix(tree): update selectors to include only direct children
rodzic
2a4b3ee2e9
commit
b206c7e77f
|
@ -7,11 +7,13 @@ layout: component
|
||||||
|
|
||||||
```html:preview
|
```html:preview
|
||||||
<sl-tree>
|
<sl-tree>
|
||||||
|
<sl-icon name="android" slot="expand-icon"></sl-icon>
|
||||||
<sl-tree-item>
|
<sl-tree-item>
|
||||||
Deciduous
|
Deciduous
|
||||||
<sl-tree-item>Birch</sl-tree-item>
|
<sl-tree-item>Birch</sl-tree-item>
|
||||||
<sl-tree-item>
|
<sl-tree-item>
|
||||||
Maple
|
Maple
|
||||||
|
<sl-icon name="pencil" slot="expand-icon"></sl-icon>
|
||||||
<sl-tree-item>Field maple</sl-tree-item>
|
<sl-tree-item>Field maple</sl-tree-item>
|
||||||
<sl-tree-item>Red maple</sl-tree-item>
|
<sl-tree-item>Red maple</sl-tree-item>
|
||||||
<sl-tree-item>Sugar maple</sl-tree-item>
|
<sl-tree-item>Sugar maple</sl-tree-item>
|
||||||
|
|
|
@ -120,7 +120,7 @@ export default class SlTree extends ShoelaceElement {
|
||||||
// Generates a clone of the expand icon element to use for each tree item
|
// Generates a clone of the expand icon element to use for each tree item
|
||||||
private getExpandButtonIcon(status: 'expand' | 'collapse') {
|
private getExpandButtonIcon(status: 'expand' | 'collapse') {
|
||||||
const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;
|
const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;
|
||||||
const icon = slot.assignedElements({ flatten: true })[0] as HTMLElement;
|
const icon = slot.assignedElements()[0] as HTMLElement;
|
||||||
|
|
||||||
// Clone it, remove ids, and slot it
|
// Clone it, remove ids, and slot it
|
||||||
if (icon) {
|
if (icon) {
|
||||||
|
@ -140,9 +140,9 @@ export default class SlTree extends ShoelaceElement {
|
||||||
item.selectable = this.selection === 'multiple';
|
item.selectable = this.selection === 'multiple';
|
||||||
|
|
||||||
['expand', 'collapse']
|
['expand', 'collapse']
|
||||||
.filter(status => !!this.querySelector(`[slot="${status}-icon"]`))
|
.filter(status => !!this.querySelector(`:scope > [slot="${status}-icon"]`))
|
||||||
.forEach((status: 'expand' | 'collapse') => {
|
.forEach((status: 'expand' | 'collapse') => {
|
||||||
const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
|
const existingIcon = item.querySelector(`:scope > [slot="${status}-icon"]`);
|
||||||
|
|
||||||
if (existingIcon === null) {
|
if (existingIcon === null) {
|
||||||
// No separator exists, add one
|
// No separator exists, add one
|
||||||
|
|
Ładowanie…
Reference in New Issue