js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

restore slot detection for non-SSR environments (#649)

Browse Source
This commit is contained in:
Cory LaViska
2025-02-03 11:21:53 -05:00
committed by GitHub
parent bde0ed7403
commit fd73542d2c
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/resources/changelog.md
View File

@@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio
- Added an orientation example to the native radio docs
- Fixed a number of broken event listeners throughout the docs
- Fixed a bug in `<wa-card>` that prevented slots from showing automatically without `with-` attributes
## 3.0.0-alpha.10

16
src/components/card/card.ts
View File

@@ -1,5 +1,6 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { HasSlotController } from '../../internal/slot.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import sizeStyles from '../../styles/utilities/size.css';
import styles from './card.css';
@@ -28,17 +29,26 @@ import styles from './card.css';
export default class WaCard extends WebAwesomeElement {
static shadowStyle = [sizeStyles, styles];
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-header', type: Boolean }) withHeader = false;
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
/** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-image', type: Boolean }) withImage = false;
@property({ attribute: 'with-image', type: Boolean, reflect: true }) withImage = false;
/** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
@property({ attribute: 'with-footer', type: Boolean }) withFooter = false;
@property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
updated() {
// Enable the respective slots when detected
if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
if (!this.withImage && this.hasSlotController.test('image')) this.withImage = true;
if (!this.withFooter && this.hasSlotController.test('footer')) this.withFooter = true;
}
render() {
return html`