mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
10 Commits
fouce-docs
...
v3.0.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
844015df7b | ||
|
|
d5da2e2db5 | ||
|
|
efbc404524 | ||
|
|
b6afa148ae | ||
|
|
7c3795897c | ||
|
|
986e52f977 | ||
|
|
6dce88429a | ||
|
|
04497cfd13 | ||
|
|
75116a5b0c | ||
|
|
5e192023b4 |
9
package-lock.json
generated
9
package-lock.json
generated
@@ -13977,10 +13977,10 @@
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@awesome.me/webawesome",
|
||||
"version": "3.0.0-beta.4",
|
||||
"version": "3.0.0-beta.5",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@ctrl/tinycolor": "4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
@@ -13988,8 +13988,7 @@
|
||||
"composed-offset-position": "^0.0.6",
|
||||
"lit": "^3.2.1",
|
||||
"nanoid": "^5.1.5",
|
||||
"qr-creator": "^1.0.0",
|
||||
"style-observer": "^0.0.7"
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0"
|
||||
@@ -14000,7 +13999,7 @@
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0-beta.4",
|
||||
"version": "3.0.0-beta.5",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
|
||||
@@ -51,52 +51,50 @@
|
||||
<body class="layout-{{ layout | stripExtension }} page-{{ page.fileSlug or 'home' }}{{ ' page-wide' if wide }} page-{{ pageType or 'docs' }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle {% if pageType == 'marketing' %}disable-sticky="header"{% endif %} mobile-breakpoint="1180">
|
||||
{% if pageHeader %}
|
||||
{% include pageHeader %}
|
||||
{% else %}
|
||||
<header slot="header" class="wa-split">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
{# Nav toggle #}
|
||||
<wa-button appearance="plain" size="small" data-toggle-nav>
|
||||
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
|
||||
</wa-button>
|
||||
{% block pageHeader %}
|
||||
<header slot="header" class="wa-split">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
{# Nav toggle #}
|
||||
<wa-button appearance="plain" size="small" data-toggle-nav>
|
||||
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<a href="/" aria-label="Web Awesome">
|
||||
<span class="wa-desktop-only">{% include "logo.njk" %}</span>
|
||||
<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
|
||||
</a>
|
||||
<small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
|
||||
<wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar" class="wa-cluster">
|
||||
{# Desktop selectors #}
|
||||
<div class="wa-desktop-only wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
<a href="/" aria-label="Web Awesome">
|
||||
<span class="wa-desktop-only">{% include "logo.njk" %}</span>
|
||||
<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
|
||||
</a>
|
||||
<small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
|
||||
<wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
|
||||
<div id="docs-toolbar" class="wa-cluster">
|
||||
{# Desktop selectors #}
|
||||
<div class="wa-desktop-only wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
|
||||
<div id="github-buttons" class="wa-cluster wa-gap-xs">
|
||||
<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon family="brands" name="github" label="GitHub"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
|
||||
<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
|
||||
<wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
|
||||
|
||||
<div id="github-buttons" class="wa-cluster wa-gap-xs">
|
||||
<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon family="brands" name="github" label="GitHub"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
|
||||
<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical"></wa-divider>
|
||||
|
||||
{# Login #}
|
||||
{% server "loginOrAvatar" %}
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical"></wa-divider>
|
||||
|
||||
{# Login #}
|
||||
{% server "loginOrAvatar" %}
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{# Sidebar #}
|
||||
{% if hasSidebar %}
|
||||
@@ -150,9 +148,7 @@
|
||||
{% include 'search.njk' %}
|
||||
|
||||
{# Footer #}
|
||||
{% if pageFooter %}
|
||||
{% include pageFooter %}
|
||||
{% endif %}
|
||||
{% block pageFooter %}{% endblock %}
|
||||
</wa-page>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -17,10 +17,8 @@ category: Organization
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small class="wa-caption-m">6 weeks old</small>
|
||||
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating label="Rating"></wa-rating>
|
||||
</div>
|
||||
<wa-button slot="footer" variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating slot="footer-actions" label="Rating"></wa-rating>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
@@ -55,14 +53,11 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
|
||||
|
||||
```html {.example}
|
||||
<wa-card class="card-header">
|
||||
<div slot="header" class="wa-split">
|
||||
Header Title
|
||||
<wa-button appearance="plain">
|
||||
<wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
<h3 slot="header">Header Title</h3>
|
||||
This card has a header. You can put all sorts of things in it!
|
||||
<wa-button appearance="plain" slot="header-actions">
|
||||
<wa-icon name="gear" variant="solid" label="Settings"></wa-icon>
|
||||
</wa-button>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
@@ -85,10 +80,9 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
|
||||
<wa-card class="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-rating></wa-rating>
|
||||
<wa-button variant="brand">Preview</wa-button>
|
||||
</div>
|
||||
<wa-rating slot="footer"></wa-rating>
|
||||
|
||||
<wa-button slot="footer-actions" variant="brand">Preview</wa-button>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
@@ -155,3 +149,35 @@ Use the `appearance` attribute to change the card's visual appearance.
|
||||
{%- endfor %}
|
||||
</div>
|
||||
```
|
||||
|
||||
### Orientation
|
||||
|
||||
Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
|
||||
<wa-callout>
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
The `actions` slot is only available for the horizontal orientation
|
||||
</wa-callout>
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card orientation="horizontal" class="horizontal-card">
|
||||
<img
|
||||
slot="media"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
<wa-button slot="actions" variant="neutral" appearance="plain"
|
||||
><wa-icon name="ellipsis" label="actions"></wa-icon
|
||||
></wa-button>
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.horizontal-card {
|
||||
img[slot='media'] {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -344,7 +344,7 @@ The content of the carousel can be changed by adding or removing carousel items.
|
||||
|
||||
### Vertical Scrolling
|
||||
|
||||
Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set amn explicit `height` or `max-height` on the carousel using CSS.
|
||||
Setting the `orientation` attribute to `vertical` will render the carousel in a vertical layout. If the content of your slides vary in height, you will need to set an explicit `height` or `max-height` on the carousel using CSS.
|
||||
|
||||
```html {.example}
|
||||
<wa-carousel class="vertical" pagination orientation="vertical">
|
||||
|
||||
@@ -96,7 +96,7 @@ Use the `icon` slot to add icons to [dropdown items](/docs/components/dropdown-i
|
||||
Paste
|
||||
</wa-dropdown-item>
|
||||
|
||||
<wa-dropdown-item value="delete">
|
||||
<wa-dropdown-item value="delete" variant="danger">
|
||||
<wa-icon slot="icon" name="trash"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
|
||||
@@ -6,7 +6,7 @@ category: Form Controls
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea label="Type something', will ya"></wa-textarea>
|
||||
<wa-textarea label="Type somethin', will ya"></wa-textarea>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
@@ -10,6 +10,13 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
|
||||
## Next
|
||||
|
||||
## 3.0.0-beta.6
|
||||
|
||||
- Fixed a bug in `<wa-dropdown>` that closed the dropdown event when preventing `wa-select` [issue:1432]
|
||||
- Pin `@ctrl/tinycolor` to `4.1.0` due to malware in `4.1.1` and `4.1.2`. <https://socket.dev/npm/package/@ctrl/tinycolor/overview/4.1.1>
|
||||
|
||||
## 3.0.0-beta.5
|
||||
|
||||
### Bug Fixes and Improvements {data-no-outline}
|
||||
|
||||
- 🚨 BREAKING: Updated `<wa-icon>` to use Font Awesome 7 [pr:1222]
|
||||
@@ -37,6 +44,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug in `<wa-color-picker>` that prevent the picker from staying in the viewport
|
||||
- Fixed a bug that in `<wa-icon>` that caused `library`, `family`, `variant` and `name` to not reflect [pr:#1395]
|
||||
- Fixed a bug in `<wa-format-date>` and `<wa-relative-time>` that caused spaces to appear before and after the output [#1417]
|
||||
- Added horizontal orientation support with `orientation="horizontal"` for `<wa-card>`
|
||||
|
||||
## 3.0.0-beta.4
|
||||
|
||||
@@ -443,4 +451,4 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
</details>
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
@@ -4,7 +4,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-beta.4",
|
||||
"version": "3.0.0-beta.5",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -73,7 +73,7 @@
|
||||
"node": ">=14.17.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@ctrl/tinycolor": "4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
@@ -81,8 +81,7 @@
|
||||
"composed-offset-position": "^0.0.6",
|
||||
"lit": "^3.2.1",
|
||||
"nanoid": "^5.1.5",
|
||||
"qr-creator": "^1.0.0",
|
||||
"style-observer": "^0.0.7"
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,js}": [
|
||||
|
||||
@@ -77,7 +77,9 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--wa-color-surface-border);
|
||||
border-block-end-width: var(--wa-panel-border-width);
|
||||
@@ -90,7 +92,9 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--wa-color-surface-border);
|
||||
border-block-start-width: var(--wa-panel-border-width);
|
||||
@@ -102,3 +106,27 @@
|
||||
:host(:not([with-media])) .media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Orientation Styles */
|
||||
:host([orientation='horizontal']) {
|
||||
flex-direction: row;
|
||||
|
||||
.media {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='body']) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='actions']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,9 @@ import styles from './card.css';
|
||||
* @slot header - An optional header for the card.
|
||||
* @slot footer - An optional footer for the card.
|
||||
* @slot media - An optional media section to render at the start of the card.
|
||||
* @slot actions - An optional actions section to render at the end for the horizontal card.
|
||||
* @slot header-actions - An optional actions section to render in the header of the vertical card.
|
||||
* @slot footer-actions - An optional actions section to render in the footer of the vertical card.
|
||||
*
|
||||
* @csspart media - The container that wraps the card's media.
|
||||
* @csspart header - The container that wraps the card's header.
|
||||
@@ -42,6 +45,10 @@ export default class WaCard extends WebAwesomeElement {
|
||||
/** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
|
||||
|
||||
/** Renders the card's orientation **/
|
||||
@property({ reflect: true })
|
||||
orientation: 'horizontal' | 'vertical' = 'vertical';
|
||||
|
||||
updated() {
|
||||
// Enable the respective slots when detected
|
||||
if (!this.withHeader && this.hasSlotController.test('header')) this.withHeader = true;
|
||||
@@ -50,11 +57,27 @@ export default class WaCard extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
// Horizontal Orientation
|
||||
if (this.orientation === 'horizontal') {
|
||||
return html`
|
||||
<slot name="media" part="media" class="media"></slot>
|
||||
<slot part="body" class="body"></slot>
|
||||
<slot name="actions" part="actions" class="actions"></slot>
|
||||
`;
|
||||
}
|
||||
|
||||
// Vertical Orientation
|
||||
return html`
|
||||
<slot name="media" part="media" class="media"></slot>
|
||||
<slot name="header" part="header" class="header"></slot>
|
||||
<header part="header" class="header">
|
||||
<slot name="header"></slot>
|
||||
<slot name="header-actions"></slot>
|
||||
</header>
|
||||
<slot part="body" class="body"></slot>
|
||||
<slot name="footer" part="footer" class="footer"></slot>
|
||||
<footer part="footer" class="footer">
|
||||
<slot name="footer"></slot>
|
||||
<slot name="footer-actions"></slot>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,7 +224,7 @@ export default class WaDialog extends WebAwesomeElement {
|
||||
<header part="header" class="header">
|
||||
<h2 part="title" class="title" id="title">
|
||||
<!-- If there's no label, use an invisible character to prevent the header from collapsing -->
|
||||
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
|
||||
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(8203)} </slot>
|
||||
</h2>
|
||||
<div part="header-actions" class="header-actions">
|
||||
<slot name="header-actions"></slot>
|
||||
|
||||
@@ -241,7 +241,7 @@ export default class WaDrawer extends WebAwesomeElement {
|
||||
<header part="header" class="header">
|
||||
<h2 part="title" class="title" id="title">
|
||||
<!-- If there's no label, use an invisible character to prevent the header from collapsing -->
|
||||
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
|
||||
<slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(8203)} </slot>
|
||||
</h2>
|
||||
<div part="header-actions" class="header-actions">
|
||||
<slot name="header-actions"></slot>
|
||||
|
||||
@@ -2,7 +2,7 @@ export class WaSelectEvent extends Event {
|
||||
readonly detail;
|
||||
|
||||
constructor(detail: WaSelectEventDetail) {
|
||||
super('wa-select', { bubbles: true, cancelable: false, composed: true });
|
||||
super('wa-select', { bubbles: true, cancelable: true, composed: true });
|
||||
this.detail = detail;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user