-
Notifications
You must be signed in to change notification settings - Fork 83
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
experiment: add LitElement based version of avatar-group (#8155)
- Loading branch information
1 parent
f078f8e
commit 2f388cf
Showing
14 changed files
with
322 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/avatar-group/src/vaadin-lit-avatar-group-menu-item.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2020 - 2024 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
|
|
||
| /** | ||
| * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately. | ||
| * | ||
| * @customElement | ||
| * @extends HTMLElement | ||
| * @mixes DirMixin | ||
| * @mixes ItemMixin | ||
| * @mixes ThemableMixin | ||
| * @protected | ||
| */ | ||
| class AvatarGroupMenuItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) { | ||
| static get is() { | ||
| return 'vaadin-avatar-group-menu-item'; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return css` | ||
| :host { | ||
| display: inline-block; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <span part="checkmark" aria-hidden="true"></span> | ||
| <div part="content"> | ||
| <slot></slot> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| ready() { | ||
| super.ready(); | ||
|
|
||
| this.setAttribute('role', 'menuitem'); | ||
| } | ||
| } | ||
|
|
||
| defineCustomElement(AvatarGroupMenuItem); | ||
|
|
||
| export { AvatarGroupMenuItem }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2020 - 2024 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
|
|
||
| /** | ||
| * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately. | ||
| * | ||
| * @customElement | ||
| * @extends HTMLElement | ||
| * @mixes ControllerMixin | ||
| * @mixes DirMixin | ||
| * @mixes ListMixin | ||
| * @mixes ThemableMixin | ||
| * @protected | ||
| */ | ||
| class AvatarGroupMenu extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) { | ||
| static get is() { | ||
| return 'vaadin-avatar-group-menu'; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return css` | ||
| :host { | ||
| display: flex; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| [part='items'] { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| static get properties() { | ||
| return { | ||
| // We don't need to define this property since super default is vertical, | ||
| // but we don't want it to be modified, or be shown in the API docs. | ||
| /** @private */ | ||
| orientation: { | ||
| readOnly: true, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * @return {!HTMLElement} | ||
| * @protected | ||
| * @override | ||
| */ | ||
| get _scrollerElement() { | ||
| return this.shadowRoot.querySelector('[part="items"]'); | ||
| } | ||
|
|
||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <div part="items"> | ||
| <slot></slot> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| ready() { | ||
| super.ready(); | ||
|
|
||
| this.setAttribute('role', 'menu'); | ||
| } | ||
| } | ||
|
|
||
| defineCustomElement(AvatarGroupMenu); | ||
|
|
||
| export { AvatarGroupMenu }; |
64 changes: 64 additions & 0 deletions
64
packages/avatar-group/src/vaadin-lit-avatar-group-overlay.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /** | ||
| * @license | ||
| * Copyright (c) 2020 - 2024 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| import { html, LitElement } from 'lit'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js'; | ||
| import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js'; | ||
| import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
|
|
||
| /** | ||
| * An element used internally by `<vaadin-avatar-group>`. Not intended to be used separately. | ||
| * | ||
| * @customElement | ||
| * @extends HTMLElement | ||
| * @mixes PositionMixin | ||
| * @mixes OverlayMixin | ||
| * @mixes DirMixin | ||
| * @mixes ThemableMixin | ||
| * @private | ||
| */ | ||
| class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) { | ||
| static get is() { | ||
| return 'vaadin-avatar-group-overlay'; | ||
| } | ||
|
|
||
| static get styles() { | ||
| return overlayStyles; | ||
| } | ||
|
|
||
| static get properties() { | ||
| return { | ||
| /** | ||
| * When true, the overlay is visible and attached to body. | ||
| * This property config is overridden to set `sync: true`. | ||
| */ | ||
| opened: { | ||
| type: Boolean, | ||
| notify: true, | ||
| observer: '_openedChanged', | ||
| reflectToAttribute: true, | ||
| sync: true, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div> | ||
| <div part="overlay" id="overlay" tabindex="0"> | ||
| <div part="content" id="content"> | ||
| <slot></slot> | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| defineCustomElement(AvatarGroupOverlay); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './vaadin-avatar-group.js'; |
Oops, something went wrong.