mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
syncing with repo
This commit is contained in:
Kelsey Jackson
@@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<wa-page>
|
||||
<a href="#" slot="banner" style="background-color: var(--wa-color-warning-fill-normal)">Get in on our holiday
|
||||
deals!</a>
|
||||
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
|
||||
<div style="background-color: black; height: 40px; width: 40px"></div>
|
||||
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
|
||||
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
|
||||
</header>
|
||||
<main style="margin: 0 auto; max-width: 140ch;">
|
||||
<img style="object-fit: none;" src="https://uploads.webawesome.com/cta-1440.jpg" alt="" sizes="(max-width: 480px) 480px,
|
||||
(max-width: 600px) 600px, (max-width: 900px) 900px, 1440px"
|
||||
srcset="https://uploads.webawesome.com/cta-480.jpg 480w, https://uploads.webawesome.com/cta-600.jpg 600w, https://uploads.webawesome.com/cta-900.jpg 900w, https://uploads.webawesome.com/cta-1440.jpg 1440w" />
|
||||
<!--<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
|
||||
<h2 class="wa-heading-3xl" style="text-align: center">
|
||||
Unlock Your Future: <br />Start Learning Web Development Today!
|
||||
</h2>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="wa-stack wa-align">
|
||||
<h2 class="wa-heading-2xl">Recipes</h2>
|
||||
<div class="wa-grid">
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
|
||||
Appetizers and Snacks
|
||||
</a>
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center">
|
||||
Main Dishes
|
||||
</a>
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
|
||||
Desserts
|
||||
</a>
|
||||
</div>
|
||||
<wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
|
||||
</div>
|
||||
</main>
|
||||
<footer slot="footer">Footer</footer>
|
||||
</wa-page>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="wa-cloak">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<wa-page>
|
||||
<a href="#" slot="banner" style="background-color: var(--wa-color-warning-fill-normal)">Get in on our holiday
|
||||
deals!</a>
|
||||
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
|
||||
<div style="background-color: black; height: 40px; width: 40px"></div>
|
||||
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
|
||||
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
|
||||
</header>
|
||||
<main style="margin: 0 auto; max-width: 140ch;">
|
||||
<img style="object-fit: none;" src="https://uploads.webawesome.com/cta-1440.jpg" alt="" sizes="(max-width: 480px) 480px,
|
||||
(max-width: 600px) 600px, (max-width: 900px) 900px, 1440px"
|
||||
srcset="https://uploads.webawesome.com/cta-480.jpg 480w, https://uploads.webawesome.com/cta-600.jpg 600w, https://uploads.webawesome.com/cta-900.jpg 900w, https://uploads.webawesome.com/cta-1440.jpg 1440w" />
|
||||
<!--<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
|
||||
<h2 class="wa-heading-3xl" style="text-align: center">
|
||||
Unlock Your Future: <br />Start Learning Web Development Today!
|
||||
</h2>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="wa-stack wa-align">
|
||||
<h2 class="wa-heading-2xl">Recipes</h2>
|
||||
<div class="wa-grid">
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
|
||||
Appetizers and Snacks
|
||||
</a>
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center">
|
||||
Main Dishes
|
||||
</a>
|
||||
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
|
||||
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
|
||||
Desserts
|
||||
</a>
|
||||
</div>
|
||||
<wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
|
||||
</div>
|
||||
</main>
|
||||
<footer slot="footer">Footer</footer>
|
||||
</wa-page>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/animated-image/animated-image.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
export type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-animated-image';
|
||||
|
||||
/**
|
||||
* @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
* @documentation https://backers.webawesome.com/docs/components/animated-image
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @event wa-load - Emitted when the image loads successfully.
|
||||
* @event wa-error - Emitted when the image fails to load.
|
||||
*
|
||||
* @slot play-icon - Optional play icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
* @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @csspart control-box - The container that surrounds the pause/play icons and provides their background.
|
||||
*
|
||||
* @cssproperty --control-box-size - The size of the icon box.
|
||||
* @cssproperty --icon-size - The size of the play/pause icons.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaLoad: 'wa-load' as EventName<WaLoadEvent>,
|
||||
onWaError: 'wa-error' as EventName<WaErrorEvent>,
|
||||
},
|
||||
displayName: 'WaAnimatedImage',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/animation/animation.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js';
|
||||
export type { WaCancelEvent, WaFinishEvent, WaStartEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-animation';
|
||||
|
||||
/**
|
||||
* @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
|
||||
* @documentation https://backers.webawesome.com/docs/components/animation
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-cancel - Emitted when the animation is canceled.
|
||||
* @event wa-finish - Emitted when the animation finishes.
|
||||
* @event wa-start - Emitted when the animation starts or restarts.
|
||||
*
|
||||
* @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To
|
||||
* animate multiple elements, either wrap them in a single container or use multiple `<wa-animation>` elements.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaCancel: 'wa-cancel' as EventName<WaCancelEvent>,
|
||||
onWaFinish: 'wa-finish' as EventName<WaFinishEvent>,
|
||||
onWaStart: 'wa-start' as EventName<WaStartEvent>,
|
||||
},
|
||||
displayName: 'WaAnimation',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,42 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/avatar/avatar.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaErrorEvent } from '../../events/events.js';
|
||||
export type { WaErrorEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-avatar';
|
||||
|
||||
/**
|
||||
* @summary Avatars are used to represent a person or object.
|
||||
* @documentation https://backers.webawesome.com/docs/components/avatar
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot icon - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @event wa-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some
|
||||
* unknown cause.
|
||||
*
|
||||
* @csspart icon - The container that wraps the avatar's icon.
|
||||
* @csspart initials - The container that wraps the avatar's initials.
|
||||
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
|
||||
*
|
||||
* @cssproperty --background-color - The avatar's background color.
|
||||
* @cssproperty --text-color - The color of the avatar's content.
|
||||
* @cssproperty --size - The size of the avatar.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaError: 'wa-error' as EventName<WaErrorEvent>,
|
||||
},
|
||||
displayName: 'WaAvatar',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/badge/badge.js';
|
||||
|
||||
const tagName = 'wa-badge';
|
||||
|
||||
/**
|
||||
* @summary Badges are used to draw attention and display statuses or counts.
|
||||
* @documentation https://backers.webawesome.com/docs/components/badge
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The badge's content.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --background-color - The badge's background color.
|
||||
* @cssproperty --border-color - The color of the badge's border.
|
||||
* @cssproperty --text-color - The color of the badge's content.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaBadge',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,32 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
|
||||
|
||||
const tagName = 'wa-breadcrumb-item';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
|
||||
* @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The breadcrumb item's label.
|
||||
* @slot prefix - An optional prefix, usually an icon.
|
||||
* @slot suffix - An optional suffix, usually an icon.
|
||||
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
|
||||
* you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
|
||||
*
|
||||
* @csspart label - The breadcrumb item's label.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart separator - The container that wraps the separator.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaBreadcrumbItem',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,28 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/breadcrumb/breadcrumb.js';
|
||||
|
||||
const tagName = 'wa-breadcrumb';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
* @documentation https://backers.webawesome.com/docs/components/breadcrumb
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - One or more breadcrumb items to display.
|
||||
* @slot separator - The separator to use between breadcrumb items. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaBreadcrumb',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/button-group/button-group.js';
|
||||
|
||||
const tagName = 'wa-button-group';
|
||||
|
||||
/**
|
||||
* @summary Button groups can be used to group related buttons into sections.
|
||||
* @documentation https://backers.webawesome.com/docs/components/button-group
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - One or more `<wa-button>` elements to display in the button group.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaButtonGroup',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,57 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/button/button.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-button';
|
||||
|
||||
/**
|
||||
* @summary Buttons represent actions that are available to the user.
|
||||
* @documentation https://backers.webawesome.com/docs/components/button
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-spinner
|
||||
*
|
||||
* @event blur - Emitted when the button loses focus.
|
||||
* @event focus - Emitted when the button gains focus.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @slot - The button's label.
|
||||
* @slot prefix - A presentational prefix icon or similar element.
|
||||
* @slot suffix - A presentational suffix icon or similar element.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart label - The button's label.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
|
||||
* @csspart spinner - The spinner that shows when the button is in the loading state.
|
||||
*
|
||||
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
|
||||
* @cssproperty --background-color - The button's background color when the button is not being interacted with.
|
||||
* @cssproperty --background-color-active - The button's background color when active.
|
||||
* @cssproperty --background-color-hover - The button's background color on hover.
|
||||
* @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
|
||||
* @cssproperty --border-color-active - The color of the button's border when active.
|
||||
* @cssproperty --border-color-hover - The color of the button's border on hover.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the button.
|
||||
* @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
|
||||
* @cssproperty --text-color-active - The color of the button's label when active.
|
||||
* @cssproperty --text-color-hover - The color of the button's label on hover.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaButton',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,31 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/callout/callout.js';
|
||||
|
||||
const tagName = 'wa-callout';
|
||||
|
||||
/**
|
||||
* @summary Callouts are used to display important messages inline.
|
||||
* @documentation https://backers.webawesome.com/docs/components/callout
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The callout's main content.
|
||||
* @slot icon - An icon to show in the callout. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @csspart icon - The container that wraps the optional icon.
|
||||
* @csspart message - The container that wraps the callout's main content.
|
||||
*
|
||||
* @cssproperty --icon-color - The color of the callout's icon.
|
||||
* @cssproperty --icon-size - The size of the callout's icon.
|
||||
* @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaCallout',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,37 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/card/card.js';
|
||||
|
||||
const tagName = 'wa-card';
|
||||
|
||||
/**
|
||||
* @summary Cards can be used to group related subjects in a container.
|
||||
* @documentation https://backers.webawesome.com/docs/components/card
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The card's main content.
|
||||
* @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.
|
||||
*
|
||||
* @csspart media - The container that wraps the card's media.
|
||||
* @csspart header - The container that wraps the card's header.
|
||||
* @csspart body - The container that wraps the card's main content.
|
||||
* @csspart footer - The container that wraps the card's footer.
|
||||
*
|
||||
* @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
|
||||
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
|
||||
* @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
|
||||
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
|
||||
* @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaCard',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,26 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/carousel-item/carousel-item.js';
|
||||
|
||||
const tagName = 'wa-carousel-item';
|
||||
|
||||
/**
|
||||
* @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
|
||||
*
|
||||
* @since 2.0
|
||||
* @status experimental
|
||||
*
|
||||
* @slot - The carousel item's content..
|
||||
*
|
||||
* @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.
|
||||
*
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaCarouselItem',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,53 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/carousel/carousel.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaSlideChangeEvent } from '../../events/events.js';
|
||||
export type { WaSlideChangeEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-carousel';
|
||||
|
||||
/**
|
||||
* @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
*
|
||||
* @since 2.2
|
||||
* @status experimental
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @event {{ index: number, slide: WaCarouselItem }} wa-slide-change - Emitted when the active slide changes.
|
||||
*
|
||||
* @slot - The carousel's main content, one or more `<wa-carousel-item>` elements.
|
||||
* @slot next-icon - Optional next icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
* @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @csspart base - The carousel's internal wrapper.
|
||||
* @csspart scroll-container - The scroll container that wraps the slides.
|
||||
* @csspart pagination - The pagination indicators wrapper.
|
||||
* @csspart pagination-item - The pagination indicator.
|
||||
* @csspart pagination-item-active - Applied when the item is active.
|
||||
* @csspart navigation - The navigation wrapper.
|
||||
* @csspart navigation-button - The navigation button.
|
||||
* @csspart navigation-button-previous - Applied to the previous button.
|
||||
* @csspart navigation-button-next - Applied to the next button.
|
||||
*
|
||||
* @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
|
||||
* @cssproperty --navigation-color - The color of the navigation arrows.
|
||||
* @cssproperty --pagination-color - The color of the dots indicating the number of slides.
|
||||
* @cssproperty --pagination-color-active - The color of the dot indicating the active slide.
|
||||
* @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
|
||||
* partially visible as a scroll hint.
|
||||
* @cssproperty --slide-gap - The space between each slide.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaSlideChange: 'wa-slide-change' as EventName<WaSlideChangeEvent>,
|
||||
},
|
||||
displayName: 'WaCarousel',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,61 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/checkbox/checkbox.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-checkbox';
|
||||
|
||||
/**
|
||||
* @summary Checkboxes allow the user to toggle an option on or off.
|
||||
* @documentation https://backers.webawesome.com/docs/components/checkbox
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The checkbox's label.
|
||||
* @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the checkbox loses focus.
|
||||
* @event change - Emitted when the checked state changes.
|
||||
* @event focus - Emitted when the checkbox gains focus.
|
||||
* @event input - Emitted when the checkbox receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart base - The component's label .
|
||||
* @csspart control - The square container that wraps the checkbox's checked state.
|
||||
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
|
||||
* @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
|
||||
* @csspart label - The container that wraps the checkbox's label.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
*
|
||||
* @cssproperty --background-color - The checkbox's background color.
|
||||
* @cssproperty --background-color-checked - The checkbox's background color when checked.
|
||||
* @cssproperty --border-color - The color of the checkbox's borders.
|
||||
* @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
|
||||
* @cssproperty --border-radius - The radius of the checkbox's corners.
|
||||
* @cssproperty --border-style - The style of the checkbox's borders.
|
||||
* @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
|
||||
* @cssproperty --checked-icon-color - The color of the checkbox's icon.
|
||||
* @cssproperty --toggle-size - The size of the checkbox.
|
||||
*
|
||||
* @cssstate checked - Applied when the checkbox is checked.
|
||||
* @cssstate disabled - Applied when the checkbox is disabled.
|
||||
* @cssstate indeterminate - Applied when the checkbox is in an indeterminate state.
|
||||
*
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaCheckbox',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,86 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/color-picker/color-picker.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-color-picker';
|
||||
|
||||
/**
|
||||
* @summary Color pickers allow the user to select a color.
|
||||
* @documentation https://backers.webawesome.com/docs/components/color-picker
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button
|
||||
* @dependency wa-button-group
|
||||
* @dependency wa-dropdown
|
||||
* @dependency wa-input
|
||||
* @dependency wa-visually-hidden
|
||||
*
|
||||
* @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
|
||||
* @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the color picker loses focus.
|
||||
* @event change - Emitted when the color picker's value changes.
|
||||
* @event focus - Emitted when the color picker receives focus.
|
||||
* @event input - Emitted when the color picker receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart trigger - The color picker's dropdown trigger.
|
||||
* @csspart swatches - The container that holds the swatches.
|
||||
* @csspart swatch - Each individual swatch.
|
||||
* @csspart grid - The color grid.
|
||||
* @csspart grid-handle - The color grid's handle.
|
||||
* @csspart slider - Hue and opacity sliders.
|
||||
* @csspart slider-handle - Hue and opacity slider handles.
|
||||
* @csspart hue-slider - The hue slider.
|
||||
* @csspart hue-slider-handle - The hue slider's handle.
|
||||
* @csspart opacity-slider - The opacity slider.
|
||||
* @csspart opacity-slider-handle - The opacity slider's handle.
|
||||
* @csspart preview - The preview color.
|
||||
* @csspart input - The text input.
|
||||
* @csspart eye-dropper-button - The eye dropper button.
|
||||
* @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
|
||||
* @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
|
||||
* @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
|
||||
* @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
|
||||
* @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
|
||||
* @csspart format-button - The format button.
|
||||
* @csspart format-button__base - The format button's exported `button` part.
|
||||
* @csspart format-button__prefix - The format button's exported `prefix` part.
|
||||
* @csspart format-button__label - The format button's exported `label` part.
|
||||
* @csspart format-button__suffix - The format button's exported `suffix` part.
|
||||
* @csspart format-button__caret - The format button's exported `caret` part.
|
||||
*
|
||||
* @cssproperty --background-color - The color picker's background color.
|
||||
* @cssproperty --border-color - The color of the color picker's borders.
|
||||
* @cssproperty --border-radius - The radius of the color picker's corners.
|
||||
* @cssproperty --border-style - The style of the color picker's borders.
|
||||
* @cssproperty --border-width - The width of the color picker's borders.
|
||||
* @cssproperty --grid-width - The width of the color grid.
|
||||
* @cssproperty --grid-height - The height of the color grid.
|
||||
* @cssproperty --grid-handle-size - The size of the color grid's handle.
|
||||
* @cssproperty --preview-size - The size of the preview color.
|
||||
* @cssproperty --preview-border-radius - The corners of the preview color.
|
||||
* @cssproperty --slider-height - The height of the hue and alpha sliders.
|
||||
* @cssproperty --slider-handle-size - The diameter of the slider's handle.
|
||||
* @cssproperty --spacing - The amount of space around and between the color picker's controls.
|
||||
* @cssproperty --swatch-border-radius - The corners of each predefined color swatch.
|
||||
* @cssproperty --swatch-size - The size of each predefined color swatch.
|
||||
* @cssproperty --trigger-border-radius - The corners of the color picker's dropdown trigger.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaColorPicker',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,42 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/comparison/comparison.js';
|
||||
|
||||
const tagName = 'wa-comparison';
|
||||
|
||||
/**
|
||||
* @summary Compare visual differences between similar content with a sliding panel.
|
||||
* @documentation https://backers.webawesome.com/docs/components/comparison
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot before - The before content, often an `<img>` or `<svg>` element.
|
||||
* @slot after - The after content, often an `<img>` or `<svg>` element.
|
||||
* @slot handle - The icon used inside the handle.
|
||||
*
|
||||
* @event change - Emitted when the position changes.
|
||||
*
|
||||
* @csspart base - The container that wraps the before and after content.
|
||||
* @csspart before - The container that wraps the before content.
|
||||
* @csspart after - The container that wraps the after content.
|
||||
* @csspart divider - The divider that separates the before and after content.
|
||||
* @csspart handle - The handle that the user drags to expose the after content.
|
||||
*
|
||||
* @cssproperty --divider-color - The color of the divider.
|
||||
* @cssproperty --divider-width - The width of the dividing line.
|
||||
* @cssproperty --handle-color - The color of the icon used inside the handle.
|
||||
* @cssproperty --handle-size - The size of the compare handle.
|
||||
*
|
||||
* @cssstate dragging - Applied when the comparison is being dragged.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaComparison',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,52 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/copy-button/copy-button.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaCopyEvent, WaErrorEvent } from '../../events/events.js';
|
||||
export type { WaCopyEvent, WaErrorEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-copy-button';
|
||||
|
||||
/**
|
||||
* @summary Copies text data to the clipboard when the user clicks the trigger.
|
||||
* @documentation https://backers.webawesome.com/docs/components/copy
|
||||
* @status experimental
|
||||
* @since 2.7
|
||||
*
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-tooltip
|
||||
*
|
||||
* @event wa-copy - Emitted when the data has been copied.
|
||||
* @event wa-error - Emitted when the data could not be copied.
|
||||
*
|
||||
* @slot copy-icon - The icon to show in the default copy state. Works best with `<wa-icon>`.
|
||||
* @slot success-icon - The icon to show when the content is copied. Works best with `<wa-icon>`.
|
||||
* @slot error-icon - The icon to show when a copy error occurs. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @csspart button - The internal `<button>` element.
|
||||
* @csspart copy-icon - The container that holds the copy icon.
|
||||
* @csspart success-icon - The container that holds the success icon.
|
||||
* @csspart error-icon - The container that holds the error icon.
|
||||
* @csspart tooltip__base - The tooltip's exported `base` part.
|
||||
* @csspart tooltip__base__popup - The tooltip's exported `popup` part.
|
||||
* @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
|
||||
* @csspart tooltip__body - The tooltip's exported `body` part.
|
||||
*
|
||||
* @cssproperty --background-color - The color of the button's background.
|
||||
* @cssproperty --background-color-hover - The color of the button's background on hover.
|
||||
* @cssproperty --success-color - The color to use for success feedback.
|
||||
* @cssproperty --error-color - The color to use for error feedback.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaCopy: 'wa-copy' as EventName<WaCopyEvent>,
|
||||
onWaError: 'wa-error' as EventName<WaErrorEvent>,
|
||||
},
|
||||
displayName: 'WaCopyButton',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,55 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/details/details.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
export type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-details';
|
||||
|
||||
/**
|
||||
* @summary Details show a brief summary and expand to show additional content.
|
||||
* @documentation https://backers.webawesome.com/docs/components/details
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The details' main content.
|
||||
* @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
|
||||
* @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
* @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @event wa-show - Emitted when the details opens.
|
||||
* @event wa-after-show - Emitted after the details opens and all animations are complete.
|
||||
* @event wa-hide - Emitted when the details closes.
|
||||
* @event wa-after-hide - Emitted after the details closes and all animations are complete.
|
||||
*
|
||||
* @csspart base - The inner `<details>` element used to render the component.
|
||||
* Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the `display` property.
|
||||
* @csspart header - The header that wraps both the summary and the expand/collapse icon.
|
||||
* @csspart summary - The container that wraps the summary.
|
||||
* @csspart icon - The container that wraps the expand/collapse icons.
|
||||
* @csspart content - The details content.
|
||||
*
|
||||
* @cssproperty --icon-color - The color of the details' icon.
|
||||
* @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
|
||||
* @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
|
||||
* @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
|
||||
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
},
|
||||
displayName: 'WaDetails',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,62 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/dialog/dialog.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
export type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-dialog';
|
||||
|
||||
/**
|
||||
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
||||
* @documentation https://backers.webawesome.com/docs/components/dialog
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button
|
||||
*
|
||||
* @slot - The dialog's main content.
|
||||
* @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
|
||||
* @slot footer - The dialog's footer, usually one or more buttons representing various options.
|
||||
*
|
||||
* @event wa-show - Emitted when the dialog opens.
|
||||
* @event wa-after-show - Emitted after the dialog opens and all animations are complete.
|
||||
* @event {{ source: Element }} wa-hide - Emitted when the dialog is requested to close. Calling
|
||||
* `event.preventDefault()` will prevent the dialog from closing. You can inspect `event.detail.source` to see which
|
||||
* element caused the dialog to close. If the source is the dialog element itself, the user has pressed [[Escape]] or
|
||||
* the dialog has been closed programmatically. Avoid using this unless closing the dialog will result in destructive
|
||||
* behavior such as data loss.
|
||||
* @event wa-after-hide - Emitted after the dialog closes and all animations are complete.
|
||||
*
|
||||
* @csspart header - The dialog's header. This element wraps the title and header actions.
|
||||
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
|
||||
* @csspart title - The dialog's title.
|
||||
* @csspart close-button - The close button, a `<wa-button>`.
|
||||
* @csspart close-button__base - The close button's exported `base` part.
|
||||
* @csspart body - The dialog's body.
|
||||
* @csspart footer - The dialog's footer.
|
||||
*
|
||||
* @cssproperty --background-color - The dialog's background color.
|
||||
* @cssproperty --border-radius - The radius of the dialog's corners.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the dialog.
|
||||
* @cssproperty --spacing - The amount of space around and between the dialog's content.
|
||||
* @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
|
||||
* @cssproperty [--show-duration=200ms] - The animation duration when showing the dialog.
|
||||
* @cssproperty [--hide-duration=200ms] - The animation duration when hiding the dialog.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
},
|
||||
displayName: 'WaDialog',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/divider/divider.js';
|
||||
|
||||
const tagName = 'wa-divider';
|
||||
|
||||
/**
|
||||
* @summary Dividers are used to visually separate or group elements.
|
||||
* @documentation https://backers.webawesome.com/docs/components/divider
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @cssproperty --color - The color of the divider.
|
||||
* @cssproperty --width - The width of the divider.
|
||||
* @cssproperty --spacing - The spacing of the divider.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaDivider',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,67 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/drawer/drawer.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
export type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-drawer';
|
||||
|
||||
/**
|
||||
* @summary Drawers slide in from a container to expose additional options and information.
|
||||
* @documentation https://backers.webawesome.com/docs/components/drawer
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button
|
||||
*
|
||||
* @slot - The drawer's main content.
|
||||
* @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
|
||||
* @slot footer - The drawer's footer, usually one or more buttons representing various options.
|
||||
*
|
||||
* @event wa-show - Emitted when the drawer opens.
|
||||
* @event wa-after-show - Emitted after the drawer opens and all animations are complete.
|
||||
* @event wa-hide - Emitted when the drawer closes.
|
||||
* @event wa-after-hide - Emitted after the drawer closes and all animations are complete.
|
||||
* @event {{ source: Element }} wa-hide - Emitted when the drawer is requesting to close. Calling
|
||||
* `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which
|
||||
* element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or
|
||||
* the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive
|
||||
* behavior such as data loss.
|
||||
*
|
||||
* @csspart header - The drawer's header. This element wraps the title and header actions.
|
||||
* @csspart header-actions - Optional actions to add to the header. Works best with `<wa-button>`.
|
||||
* @csspart title - The drawer's title.
|
||||
* @csspart close-button - The close button, a `<wa-button>`.
|
||||
* @csspart close-button__base - The close button's exported `base` part.
|
||||
* @csspart body - The drawer's body.
|
||||
* @csspart footer - The drawer's footer.
|
||||
*
|
||||
* @cssproperty --background-color - The drawer's background color.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the drawer.
|
||||
* @cssproperty --spacing - The amount of space around and between the drawer's content.
|
||||
* @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
|
||||
* depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
|
||||
* @cssproperty [--show-duration=200ms] - The animation duration when showing the drawer.
|
||||
* @cssproperty [--hide-duration=200ms] - The animation duration when hiding the drawer.
|
||||
*
|
||||
* @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
|
||||
* trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when
|
||||
* the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
},
|
||||
displayName: 'WaDrawer',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,47 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/dropdown/dropdown.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
export type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-dropdown';
|
||||
|
||||
/**
|
||||
* @summary Dropdowns expose additional content that "drops down" in a panel.
|
||||
* @documentation https://backers.webawesome.com/docs/components/dropdown
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-popup
|
||||
*
|
||||
* @slot - The dropdown's main content.
|
||||
* @slot trigger - The dropdown's trigger, usually a `<wa-button>` element.
|
||||
*
|
||||
* @event wa-show - Emitted when the dropdown opens.
|
||||
* @event wa-after-show - Emitted after the dropdown opens and all animations are complete.
|
||||
* @event wa-hide - Emitted when the dropdown closes.
|
||||
* @event wa-after-hide - Emitted after the dropdown closes and all animations are complete.
|
||||
*
|
||||
* @cssproperty --box-shadow - The shadow effects around the dropdown's edges.
|
||||
*
|
||||
* @csspart base - The component's base wrapper, a `<wa-popup>` element.
|
||||
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
||||
* @csspart trigger - The container that wraps the trigger.
|
||||
* @csspart panel - The panel that gets shown when the dropdown is open.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
},
|
||||
displayName: 'WaDropdown',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/format-bytes/format-bytes.js';
|
||||
|
||||
const tagName = 'wa-format-bytes';
|
||||
|
||||
/**
|
||||
* @summary Formats a number as a human readable bytes value.
|
||||
* @documentation https://backers.webawesome.com/docs/components/format-bytes
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaFormatBytes',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/format-date/format-date.js';
|
||||
|
||||
const tagName = 'wa-format-date';
|
||||
|
||||
/**
|
||||
* @summary Formats a date/time using the specified locale and options.
|
||||
* @documentation https://backers.webawesome.com/docs/components/format-date
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaFormatDate',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/format-number/format-number.js';
|
||||
|
||||
const tagName = 'wa-format-number';
|
||||
|
||||
/**
|
||||
* @summary Formats a number using the specified locale and options.
|
||||
* @documentation https://backers.webawesome.com/docs/components/format-number
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaFormatNumber',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,39 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/icon/icon.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
export type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-icon';
|
||||
|
||||
/**
|
||||
* @summary Icons are symbols that can be used to represent various options within an application.
|
||||
* @documentation https://backers.webawesome.com/docs/components/icon
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
|
||||
* @event wa-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
|
||||
*
|
||||
* @csspart svg - The internal SVG element.
|
||||
* @csspart use - The `<use>` element generated when using `spriteSheet: true`
|
||||
*
|
||||
* @cssproperty [--primary-color=currentColor] - Sets a duotone icon's primary color.
|
||||
* @cssproperty [--primary-opacity=1] - Sets a duotone icon's primary opacity.
|
||||
* @cssproperty [--secondary-color=currentColor] - Sets a duotone icon's secondary color.
|
||||
* @cssproperty [--secondary-opacity=0.4] - Sets a duotone icon's secondary opacity.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaLoad: 'wa-load' as EventName<WaLoadEvent>,
|
||||
onWaError: 'wa-error' as EventName<WaErrorEvent>,
|
||||
},
|
||||
displayName: 'WaIcon',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,31 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/include/include.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
export type { WaErrorEvent, WaLoadEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-include';
|
||||
|
||||
/**
|
||||
* @summary Includes give you the power to embed external HTML files into the page.
|
||||
* @documentation https://backers.webawesome.com/docs/components/include
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-load - Emitted when the included file is loaded.
|
||||
* @event {{ status: number }} wa-error - Emitted when the included file fails to load due to an error.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaLoad: 'wa-load' as EventName<WaLoadEvent>,
|
||||
onWaError: 'wa-error' as EventName<WaErrorEvent>,
|
||||
},
|
||||
displayName: 'WaInclude',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,59 +0,0 @@
|
||||
export { default as WaAnimatedImage } from './animated-image/index.js';
|
||||
export { default as WaAnimation } from './animation/index.js';
|
||||
export { default as WaBreadcrumb } from './breadcrumb/index.js';
|
||||
export { default as WaBreadcrumbItem } from './breadcrumb-item/index.js';
|
||||
export { default as WaButton } from './button/index.js';
|
||||
export { default as WaBadge } from './badge/index.js';
|
||||
export { default as WaAvatar } from './avatar/index.js';
|
||||
export { default as WaButtonGroup } from './button-group/index.js';
|
||||
export { default as WaCallout } from './callout/index.js';
|
||||
export { default as WaCard } from './card/index.js';
|
||||
export { default as WaCarousel } from './carousel/index.js';
|
||||
export { default as WaCarouselItem } from './carousel-item/index.js';
|
||||
export { default as WaCheckbox } from './checkbox/index.js';
|
||||
export { default as WaColorPicker } from './color-picker/index.js';
|
||||
export { default as WaComparison } from './comparison/index.js';
|
||||
export { default as WaCopyButton } from './copy-button/index.js';
|
||||
export { default as WaDetails } from './details/index.js';
|
||||
export { default as WaDialog } from './dialog/index.js';
|
||||
export { default as WaDivider } from './divider/index.js';
|
||||
export { default as WaDrawer } from './drawer/index.js';
|
||||
export { default as WaDropdown } from './dropdown/index.js';
|
||||
export { default as WaFormatBytes } from './format-bytes/index.js';
|
||||
export { default as WaFormatDate } from './format-date/index.js';
|
||||
export { default as WaFormatNumber } from './format-number/index.js';
|
||||
export { default as WaIcon } from './icon/index.js';
|
||||
export { default as WaInclude } from './include/index.js';
|
||||
export { default as WaInput } from './input/index.js';
|
||||
export { default as WaMenu } from './menu/index.js';
|
||||
export { default as WaMenuItem } from './menu-item/index.js';
|
||||
export { default as WaMenuLabel } from './menu-label/index.js';
|
||||
export { default as WaMutationObserver } from './mutation-observer/index.js';
|
||||
export { default as WaPage } from './page/index.js';
|
||||
export { default as WaPopover } from './popover/index.js';
|
||||
export { default as WaPopup } from './popup/index.js';
|
||||
export { default as WaProgressRing } from './progress-ring/index.js';
|
||||
export { default as WaQrCode } from './qr-code/index.js';
|
||||
export { default as WaOption } from './option/index.js';
|
||||
export { default as WaRadio } from './radio/index.js';
|
||||
export { default as WaRadioGroup } from './radio-group/index.js';
|
||||
export { default as WaRelativeTime } from './relative-time/index.js';
|
||||
export { default as WaProgressBar } from './progress-bar/index.js';
|
||||
export { default as WaResizeObserver } from './resize-observer/index.js';
|
||||
export { default as WaScroller } from './scroller/index.js';
|
||||
export { default as WaRating } from './rating/index.js';
|
||||
export { default as WaSkeleton } from './skeleton/index.js';
|
||||
export { default as WaSlider } from './slider/index.js';
|
||||
export { default as WaSplitPanel } from './split-panel/index.js';
|
||||
export { default as WaSelect } from './select/index.js';
|
||||
export { default as WaSwitch } from './switch/index.js';
|
||||
export { default as WaTab } from './tab/index.js';
|
||||
export { default as WaTabGroup } from './tab-group/index.js';
|
||||
export { default as WaSpinner } from './spinner/index.js';
|
||||
export { default as WaTag } from './tag/index.js';
|
||||
export { default as WaTextarea } from './textarea/index.js';
|
||||
export { default as WaTree } from './tree/index.js';
|
||||
export { default as WaTabPanel } from './tab-panel/index.js';
|
||||
export { default as WaTreeItem } from './tree-item/index.js';
|
||||
export { default as WaZoomableFrame } from './zoomable-frame/index.js';
|
||||
export { default as WaTooltip } from './tooltip/index.js';
|
||||
@@ -1,61 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/input/input.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaClearEvent, WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaClearEvent, WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-input';
|
||||
|
||||
/**
|
||||
* @summary Inputs collect data from the user.
|
||||
* @documentation https://backers.webawesome.com/docs/components/input
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
|
||||
* @slot suffix - Used to append a presentational icon or similar element to the input.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
|
||||
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event change - Emitted when an alteration to the control's value is committed by the user.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event wa-clear - Emitted when the clear button is activated.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart label - The label
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart input - The wrapper being rendered as an input
|
||||
* @csspart base - The internal `<input>` control.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart clear-button - The clear button.
|
||||
* @csspart password-toggle-button - The password toggle button.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
*
|
||||
* @cssproperty --background-color - The input's background color.
|
||||
* @cssproperty --border-color - The color of the input's borders.
|
||||
* @cssproperty --border-width - The width of the input's borders. Expects a single value.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the input.
|
||||
*
|
||||
* @cssstate blank - The input is empty.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaClear: 'wa-clear' as EventName<WaClearEvent>,
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaInput',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,46 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/menu-item/menu-item.js';
|
||||
|
||||
const tagName = 'wa-menu-item';
|
||||
|
||||
/**
|
||||
* @summary Menu items provide options for the user to pick from in a menu.
|
||||
* @documentation https://backers.webawesome.com/docs/components/menu-item
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-popup
|
||||
*
|
||||
* @slot - The menu item's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
||||
* @slot suffix - Used to append an icon or similar element to the menu item.
|
||||
* @slot submenu - Used to denote a nested menu.
|
||||
* @slot checked-icon - The icon used to indicate that this menu item is checked. Usually a `<wa-icon>`.
|
||||
* @slot submenu-icon - The icon used to indicate that this menu item has a submenu. Usually a `<wa-icon>`.
|
||||
*
|
||||
* @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
|
||||
* @csspart prefix - The prefix container.
|
||||
* @csspart label - The menu item label.
|
||||
* @csspart suffix - The suffix container.
|
||||
* @csspart spinner - The spinner that shows when the menu item is in the loading state.
|
||||
* @csspart spinner__base - The spinner's base part.
|
||||
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
|
||||
*
|
||||
* @cssproperty --background-color-hover - The menu item's background color on hover.
|
||||
* @cssproperty --text-color-hover - The label color on hover.
|
||||
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
|
||||
*
|
||||
* @cssstate has-submenu - Applied when the menu item has a submenu.
|
||||
* @cssstate submenu-expanded - Applied when the menu item has a submenu and it is expanded.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaMenuItem',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/menu-label/menu-label.js';
|
||||
|
||||
const tagName = 'wa-menu-label';
|
||||
|
||||
/**
|
||||
* @summary Menu labels are used to describe a group of menu items.
|
||||
* @documentation https://backers.webawesome.com/docs/components/menu-label
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The menu label's content.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaMenuLabel',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,33 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/menu/menu.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaSelectEvent } from '../../events/events.js';
|
||||
export type { WaSelectEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-menu';
|
||||
|
||||
/**
|
||||
* @summary Menus provide a list of options for the user to choose from.
|
||||
* @documentation https://backers.webawesome.com/docs/components/menu
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-menu-item
|
||||
*
|
||||
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
||||
*
|
||||
* @event {{ item: WaMenuItem }} wa-select - Emitted when a menu item is selected.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaSelect: 'wa-select' as EventName<WaSelectEvent>,
|
||||
},
|
||||
displayName: 'WaMenu',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,31 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/mutation-observer/mutation-observer.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaMutationEvent } from '../../events/events.js';
|
||||
export type { WaMutationEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-mutation-observer';
|
||||
|
||||
/**
|
||||
* @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
|
||||
* @documentation https://backers.webawesome.com/docs/components/mutation-observer
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event {{ mutationList: MutationRecord[] }} wa-mutation - Emitted when a mutation occurs.
|
||||
*
|
||||
* @slot - The content to watch for mutations.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaMutation: 'wa-mutation' as EventName<WaMutationEvent>,
|
||||
},
|
||||
displayName: 'WaMutationObserver',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,41 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/option/option.js';
|
||||
|
||||
const tagName = 'wa-option';
|
||||
|
||||
/**
|
||||
* @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
|
||||
* @documentation https://backers.webawesome.com/docs/components/option
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The option's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
||||
* @slot suffix - Used to append an icon or similar element to the menu item.
|
||||
*
|
||||
* @cssproperty --background-color-current - The current option's background color.
|
||||
* @cssproperty --background-color-hover - The options's background color on hover.
|
||||
* @cssproperty --text-color-current - The current option's label color.
|
||||
* @cssproperty --text-color-hover - The label color on hover.
|
||||
*
|
||||
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
|
||||
* @csspart label - The option's label.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
*
|
||||
* @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
|
||||
* @cssstate selected - The option is selected and has aria-selected="true"
|
||||
* @cssstate hover - Like `:hover` but works while dragging in Safari
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaOption',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,64 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/page/page.js';
|
||||
|
||||
const tagName = 'wa-page';
|
||||
|
||||
/**
|
||||
* @summary Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
* @documentation https://backers.webawesome.com/docs/components/page
|
||||
* @status experimental
|
||||
* @since 3.0
|
||||
*
|
||||
* @slot - The page's main content.
|
||||
* @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.
|
||||
* @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.
|
||||
* @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.
|
||||
* @slot menu - The left side of the page. If you slot an element in here, you will override the default `navigation` slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls.
|
||||
* @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<wa-drawer>`.
|
||||
* @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section "sticks" to the top as the page scrolls.
|
||||
* @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<wa-drawer>`.
|
||||
* @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<wa-button>` + a 3 bars `<wa-icon>`
|
||||
* @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<wa-icon>`.
|
||||
* @slot main-header - Header to display inline above the main content.
|
||||
* @slot main-footer - Footer to display inline below the main content.
|
||||
* @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls.
|
||||
* @slot skip-to-content - The "skip to content" slot. You can override this If you would like to override the `Skip to content` button and add additional "Skip to X", they can be inserted here.
|
||||
* @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart banner - The banner to show above header.
|
||||
* @csspart header - The header, usually for top level navigation / branding.
|
||||
* @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.
|
||||
* @csspart body - The wrapper around menu, main, and aside.
|
||||
* @csspart menu - The left hand side of the page. Generally intended for navigation.
|
||||
* @csspart navigation - The `<nav>` that wraps the navigation slots on desktop viewports.
|
||||
* @csspart navigation-header - The header for a navigation area. On mobile this will be the header for `<wa-drawer>`.
|
||||
* @csspart navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<wa-drawer>`.
|
||||
* @csspart navigation-toggle - The default `<wa-button>` that will toggle the `<wa-drawer>` for mobile viewports.
|
||||
* @csspart navigation-toggle-icon - The default `<wa-icon>` displayed inside of the navigation-toggle button.
|
||||
* @csspart main-header - The header above main content.
|
||||
* @csspart main-content - The main content.
|
||||
* @csspart main-footer - The footer below main content.
|
||||
* @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.
|
||||
* @csspart skip-links - Wrapper around skip-link
|
||||
* @csspart skip-link - The "skip to main content" link
|
||||
* @csspart footer - The footer of the page. This is always below the initial viewport size.
|
||||
* @csspart dialog-wrapper - A wrapper around elements such as dialogs or other modal-like elements.
|
||||
*
|
||||
* @cssproperty [--menu-width=auto] - The width of the page's "menu" section.
|
||||
* @cssproperty [--main-width=1fr] - The width of the page's "main" section.
|
||||
* @cssproperty [--aside-width=auto] - The wide of the page's "aside" section.
|
||||
* @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
|
||||
* @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
|
||||
* @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaPage',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,52 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/popup/popup.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaRepositionEvent } from '../../events/events.js';
|
||||
export type { WaRepositionEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-popup';
|
||||
|
||||
/**
|
||||
* @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
|
||||
* @documentation https://backers.webawesome.com/docs/components/popup
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
|
||||
* operations in your listener or consider debouncing it.
|
||||
*
|
||||
* @slot - The popup's content.
|
||||
* @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
|
||||
* `anchor` attribute or property instead.
|
||||
*
|
||||
* @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
|
||||
* assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
|
||||
* maybe a border or box shadow.
|
||||
* @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
|
||||
* @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
|
||||
*
|
||||
* @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
|
||||
* attribute is used.
|
||||
* @cssproperty [--arrow-color=black] - The color of the arrow.
|
||||
* @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
|
||||
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
||||
* available when using `auto-size`.
|
||||
* @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
|
||||
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
|
||||
* available when using `auto-size`.
|
||||
* @cssproperty [--show-duration=100ms] - The show duration to use when applying built-in animation classes.
|
||||
* @cssproperty [--hide-duration=100ms] - The hide duration to use when applying built-in animation classes.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaReposition: 'wa-reposition' as EventName<WaRepositionEvent>,
|
||||
},
|
||||
displayName: 'WaPopup',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,30 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/progress-bar/progress-bar.js';
|
||||
|
||||
const tagName = 'wa-progress-bar';
|
||||
|
||||
/**
|
||||
* @summary Progress bars are used to show the status of an ongoing operation.
|
||||
* @documentation https://backers.webawesome.com/docs/components/progress-bar
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - A label to show inside the progress indicator.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart indicator - The progress bar's indicator.
|
||||
* @csspart label - The progress bar's label.
|
||||
*
|
||||
* @cssproperty --indicator-color - The color of the indicator.
|
||||
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaProgressBar',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,33 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/progress-ring/progress-ring.js';
|
||||
|
||||
const tagName = 'wa-progress-ring';
|
||||
|
||||
/**
|
||||
* @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
* @documentation https://backers.webawesome.com/docs/components/progress-ring
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - A label to show inside the ring.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart label - The progress ring label.
|
||||
*
|
||||
* @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
|
||||
* @cssproperty --track-width - The width of the track.
|
||||
* @cssproperty --track-color - The color of the track.
|
||||
* @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.
|
||||
* @cssproperty --indicator-color - The color of the indicator.
|
||||
* @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaProgressRing',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/qr-code/qr-code.js';
|
||||
|
||||
const tagName = 'wa-qr-code';
|
||||
|
||||
/**
|
||||
* @summary Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
* @documentation https://backers.webawesome.com/docs/components/qr-code
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaQrCode',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,44 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/radio-group/radio-group.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-radio-group';
|
||||
|
||||
/**
|
||||
* @summary Radio groups are used to group multiple [radios](/docs/components/radio) so they function as a single form control.
|
||||
* @documentation https://backers.webawesome.com/docs/components/radio-group
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-radio
|
||||
*
|
||||
* @slot - The default slot where `<wa-radio>` elements are placed.
|
||||
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
||||
* attribute.
|
||||
* @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event change - Emitted when the radio group's selected value changes.
|
||||
* @event input - Emitted when the radio group receives user input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart form-control - The form control that wraps the label, input, and hint.
|
||||
* @csspart form-control-label - The label's wrapper.
|
||||
* @csspart form-control-input - The input's wrapper.
|
||||
* @csspart radios - The wrapper than surrounds radio items, styled as a flex container by default.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaRadioGroup',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,46 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/radio/radio.js';
|
||||
|
||||
const tagName = 'wa-radio';
|
||||
|
||||
/**
|
||||
* @summary Radios allow the user to select a single option from a group.
|
||||
* @documentation https://backers.webawesome.com/docs/components/radio
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The radio's label.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
*
|
||||
* @csspart control - The circular container that wraps the radio's checked state.
|
||||
* @csspart checked-icon - The checked icon.
|
||||
* @csspart label - The container that wraps the radio's label.
|
||||
*
|
||||
* @cssproperty --background-color - The radio's background color.
|
||||
* @cssproperty --background-color-checked - The radio's background color when checked.
|
||||
* @cssproperty --border-color - The color of the radio's borders.
|
||||
* @cssproperty --border-color-checked - The color of the radio's borders when checked.
|
||||
* @cssproperty --border-style - The style of the radio's borders.
|
||||
* @cssproperty --border-width - The width of the radio's borders. Expects a single value.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the radio.
|
||||
* @cssproperty --checked-icon-color - The color of the radio's checked icon.
|
||||
* @cssproperty --checked-icon-scale - The size of the checked icon relative to the radio.
|
||||
* @cssproperty --toggle-size - The size of the radio.
|
||||
*
|
||||
* @cssstate checked - Applied when the control is checked.
|
||||
* @cssstate disabled - Applied when the control is disabled.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaRadio',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,40 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/rating/rating.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaHoverEvent } from '../../events/events.js';
|
||||
export type { WaHoverEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-rating';
|
||||
|
||||
/**
|
||||
* @summary Ratings give users a way to quickly view and provide feedback.
|
||||
* @documentation https://backers.webawesome.com/docs/components/rating
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @event change - Emitted when the rating's value changes.
|
||||
* @event {{ phase: 'start' | 'move' | 'end', value: number }} wa-hover - Emitted when the user hovers over a value. The
|
||||
* `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the
|
||||
* rating's value would be if the user were to commit to the hovered value.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --symbol-color - The inactive color for symbols.
|
||||
* @cssproperty --symbol-color-active - The active color for symbols.
|
||||
* @cssproperty --symbol-spacing - The spacing to use around symbols.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaHover: 'wa-hover' as EventName<WaHoverEvent>,
|
||||
},
|
||||
displayName: 'WaRating',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/relative-time/relative-time.js';
|
||||
|
||||
const tagName = 'wa-relative-time';
|
||||
|
||||
/**
|
||||
* @summary Outputs a localized time phrase relative to the current date and time.
|
||||
* @documentation https://backers.webawesome.com/docs/components/relative-time
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaRelativeTime',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,31 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/resize-observer/resize-observer.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaResizeEvent } from '../../events/events.js';
|
||||
export type { WaResizeEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-resize-observer';
|
||||
|
||||
/**
|
||||
* @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
|
||||
* @documentation https://backers.webawesome.com/docs/components/resize-observer
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - One or more elements to watch for resizing.
|
||||
*
|
||||
* @event {{ entries: ResizeObserverEntry[] }} wa-resize - Emitted when the element is resized.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaResize: 'wa-resize' as EventName<WaResizeEvent>,
|
||||
},
|
||||
displayName: 'WaResizeObserver',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/scroller/scroller.js';
|
||||
|
||||
const tagName = 'wa-scroller';
|
||||
|
||||
/**
|
||||
* @summary Scrollers create an accessible container while providing visual cues that help users identify and navigate
|
||||
* through content that scrolls.
|
||||
* @documentation https://backers.webawesome.com/docs/components/card
|
||||
* @status stable
|
||||
* @since 3.0
|
||||
*
|
||||
* @slot - The content to show inside the scroller.
|
||||
*
|
||||
* @cssproperty [--shadow-color=var(--wa-color-surface-default)] - The base color of the shadow.
|
||||
* @cssproperty [--shadow-size=2rem] - The size of the shadow.
|
||||
*
|
||||
* @csspart content - The container that wraps the slotted content.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaScroller',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,95 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/select/select.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type {
|
||||
WaAfterHideEvent,
|
||||
WaAfterShowEvent,
|
||||
WaClearEvent,
|
||||
WaHideEvent,
|
||||
WaInvalidEvent,
|
||||
WaShowEvent,
|
||||
} from '../../events/events.js';
|
||||
export type {
|
||||
WaAfterHideEvent,
|
||||
WaAfterShowEvent,
|
||||
WaClearEvent,
|
||||
WaHideEvent,
|
||||
WaInvalidEvent,
|
||||
WaShowEvent,
|
||||
} from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-select';
|
||||
|
||||
/**
|
||||
* @summary Selects allow you to choose items from a menu of predefined options.
|
||||
* @documentation https://backers.webawesome.com/docs/components/select
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-popup
|
||||
* @dependency wa-tag
|
||||
* @dependency wa-option
|
||||
*
|
||||
* @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
|
||||
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
||||
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event change - Emitted when the control's value changes.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event wa-clear - Emitted when the control's value is cleared.
|
||||
* @event wa-show - Emitted when the select's menu opens.
|
||||
* @event wa-after-show - Emitted after the select's menu opens and all animations are complete.
|
||||
* @event wa-hide - Emitted when the select's menu closes.
|
||||
* @event wa-after-hide - Emitted after the select's menu closes and all animations are complete.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart form-control - The form control that wraps the label, input, and hint.
|
||||
* @csspart form-control-label - The label's wrapper.
|
||||
* @csspart form-control-input - The select's wrapper.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
||||
* @csspart prefix - The container that wraps the prefix slot.
|
||||
* @csspart suffix - The container that wraps the suffix slot.
|
||||
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
||||
* @csspart listbox - The listbox container where options are slotted.
|
||||
* @csspart tags - The container that houses option tags when `multiselect` is used.
|
||||
* @csspart tag - The individual tags that represent each multiselect option.
|
||||
* @csspart tag__content - The tag's content part.
|
||||
* @csspart tag__remove-button - The tag's remove button.
|
||||
* @csspart tag__remove-button__base - The tag's remove button base part.
|
||||
* @csspart clear-button - The clear button.
|
||||
* @csspart expand-icon - The container that wraps the expand icon.
|
||||
*
|
||||
* @cssproperty --background-color - The background color of the select's combobox.
|
||||
* @cssproperty --border-color - The border color of the select's combobox.
|
||||
* @cssproperty --border-width - The width of the select's borders, including the listbox.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
|
||||
* @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
|
||||
*
|
||||
* @cssstate blank - The select is empty.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaClear: 'wa-clear' as EventName<WaClearEvent>,
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaSelect',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,27 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/skeleton/skeleton.js';
|
||||
|
||||
const tagName = 'wa-skeleton';
|
||||
|
||||
/**
|
||||
* @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.
|
||||
* @documentation https://backers.webawesome.com/docs/components/skeleton
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
|
||||
*
|
||||
* @cssproperty --border-radius - The skeleton's border radius.
|
||||
* @cssproperty --color - The color of the skeleton.
|
||||
* @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaSkeleton',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,70 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/slider/slider.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-slider';
|
||||
|
||||
/**
|
||||
* <wa-slider>
|
||||
*
|
||||
* @summary Ranges allow the user to select a single value within a given range using a slider.
|
||||
* @documentation https://backers.webawesome.com/docs/components/range
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-tooltip
|
||||
*
|
||||
* @slot label - The slider label. Alternatively, you can use the `label` attribute.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
* instead.
|
||||
* @slot reference - One or more reference labels to show visually below the slider.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event change - Emitted when an alteration to the control's value is committed by the user.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart label - The element that contains the sliders's label.
|
||||
* @csspart hint - The element that contains the slider's description.
|
||||
* @csspart slider - The focusable element with `role="slider"`. Contains the track and reference slot.
|
||||
* @csspart track - The slider's track.
|
||||
* @csspart indicator - The colored indicator that shows from the start of the slider to the current value.
|
||||
* @csspart markers - The container that holds all the markers when `with-markers` is used.
|
||||
* @csspart marker - The individual markers that are shown when `with-markers` is used.
|
||||
* @csspart references - The container that holds references that get slotted in.
|
||||
* @csspart thumb - The slider's thumb.
|
||||
* @csspart thumb-min - The min value thumb in a range slider.
|
||||
* @csspart thumb-max - The max value thumb in a range slider.
|
||||
* @csspart tooltip - The tooltip, a `<wa-tooltip>` element.
|
||||
* @csspart tooltip__tooltip - The tooltip's `tooltip` part.
|
||||
* @csspart tooltip__content - The tooltip's `content` part.
|
||||
* @csspart tooltip__arrow - The tooltip's `arrow` part.
|
||||
*
|
||||
* @cssstate disabled - Applied when the slider is disabled.
|
||||
* @cssstate dragging - Applied when the slider is being dragged.
|
||||
* @cssstate focused - Applied when the slider has focus.
|
||||
* @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it.
|
||||
* @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it.
|
||||
*
|
||||
* @cssproperty [--track-size=0.75em] - The height or width of the slider's track.
|
||||
* @cssproperty [--marker-width=0.1875em] - The width of each individual marker.
|
||||
* @cssproperty [--marker-height=0.1875em] - The height of each individual marker.
|
||||
* @cssproperty [--thumb-width=1.25em] - The width of the thumb.
|
||||
* @cssproperty [--thumb-height=1.25em] - The height of the thumb.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaSlider',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,28 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/spinner/spinner.js';
|
||||
|
||||
const tagName = 'wa-spinner';
|
||||
|
||||
/**
|
||||
* @summary Spinners are used to show the progress of an indeterminate operation.
|
||||
* @documentation https://backers.webawesome.com/docs/components/spinner
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --track-width - The width of the track.
|
||||
* @cssproperty --track-color - The color of the track.
|
||||
* @cssproperty --indicator-color - The color of the spinner's indicator.
|
||||
* @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaSpinner',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,45 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/split-panel/split-panel.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaRepositionEvent } from '../../events/events.js';
|
||||
export type { WaRepositionEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-split-panel';
|
||||
|
||||
/**
|
||||
* @summary Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
* @documentation https://backers.webawesome.com/docs/components/split-panel
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-reposition - Emitted when the divider's position changes.
|
||||
*
|
||||
* @slot start - Content to place in the start panel.
|
||||
* @slot end - Content to place in the end panel.
|
||||
* @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.
|
||||
*
|
||||
* @csspart start - The start panel.
|
||||
* @csspart end - The end panel.
|
||||
* @csspart panel - Targets both the start and end panels.
|
||||
* @csspart divider - The divider that separates the start and end panels.
|
||||
*
|
||||
* @cssproperty --divider-color - The color of the divider.
|
||||
* @cssproperty [--divider-width=4px] - The width of the visible divider.
|
||||
* @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
|
||||
* usually wider than the divider to facilitate easier dragging.
|
||||
* @cssproperty [--min=0] - The minimum allowed size of the primary panel.
|
||||
* @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaReposition: 'wa-reposition' as EventName<WaRepositionEvent>,
|
||||
},
|
||||
displayName: 'WaSplitPanel',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,56 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/switch/switch.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-switch';
|
||||
|
||||
/**
|
||||
* @summary Switches allow the user to toggle an option on or off.
|
||||
* @documentation https://backers.webawesome.com/docs/components/switch
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The switch's label.
|
||||
* @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event change - Emitted when the control's checked state changes.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart control - The control that houses the switch's thumb.
|
||||
* @csspart thumb - The switch's thumb.
|
||||
* @csspart label - The switch's label.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
*
|
||||
* @cssproperty --background-color - The switch's background color.
|
||||
* @cssproperty --background-color-checked - The switch's background color when checked.
|
||||
* @cssproperty --border-color - The color of the switch's borders.
|
||||
* @cssproperty --border-color-checked - The color of the switch's borders when checked.
|
||||
* @cssproperty --border-style - The style of the switch's borders.
|
||||
* @cssproperty --border-width - The width of the switch's borders. Expects a single value.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the switch.
|
||||
* @cssproperty --height - The height of the switch.
|
||||
* @cssproperty --thumb-color - The color of the thumb.
|
||||
* @cssproperty --thumb-color-checked - The color of the thumb when checked.
|
||||
* @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
|
||||
* @cssproperty --thumb-size - The size of the thumb.
|
||||
* @cssproperty --width - The width of the switch.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaSwitch',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,52 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tab-group/tab-group.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaTabHideEvent, WaTabShowEvent } from '../../events/events.js';
|
||||
export type { WaTabHideEvent, WaTabShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-tab-group';
|
||||
|
||||
/**
|
||||
* @summary Tab groups organize content into a container that shows one section at a time.
|
||||
* @documentation https://backers.webawesome.com/docs/components/tab-group
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button
|
||||
* @dependency wa-tab
|
||||
* @dependency wa-tab-panel
|
||||
*
|
||||
* @slot - Used for grouping tab panels in the tab group. Must be `<wa-tab-panel>` elements.
|
||||
* @slot nav - Used for grouping tabs in the tab group. Must be `<wa-tab>` elements. Note that `<wa-tab>` will set this
|
||||
* slot on itself automatically.
|
||||
*
|
||||
* @event {{ name: String }} wa-tab-show - Emitted when a tab is shown.
|
||||
* @event {{ name: String }} wa-tab-hide - Emitted when a tab is hidden.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart nav - The tab group's navigation container where tabs are slotted in.
|
||||
* @csspart tabs - The container that wraps the tabs.
|
||||
* @csspart body - The tab group's body where tab panels are slotted in.
|
||||
* @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a `<wa-button>`.
|
||||
* @csspart scroll-button-start - The starting scroll button.
|
||||
* @csspart scroll-button-end - The ending scroll button.
|
||||
* @csspart scroll-button__base - The scroll button's exported `base` part.
|
||||
*
|
||||
* @cssproperty --indicator-color - The color of the active tab indicator.
|
||||
* @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
|
||||
* @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaTabShow: 'wa-tab-show' as EventName<WaTabShowEvent>,
|
||||
onWaTabHide: 'wa-tab-hide' as EventName<WaTabHideEvent>,
|
||||
},
|
||||
displayName: 'WaTabGroup',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,27 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tab-panel/tab-panel.js';
|
||||
|
||||
const tagName = 'wa-tab-panel';
|
||||
|
||||
/**
|
||||
* @summary Tab panels are used inside [tab groups](/docs/components/tab-group) to display tabbed content.
|
||||
* @documentation https://backers.webawesome.com/docs/components/tab-panel
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The tab panel's content.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --padding - The tab panel's padding.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaTabPanel',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,27 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tab/tab.js';
|
||||
|
||||
const tagName = 'wa-tab';
|
||||
|
||||
/**
|
||||
* @summary Tabs are used inside [tab groups](/docs/components/tab-group) to represent and activate [tab panels](/docs/components/tab-panel).
|
||||
* @documentation https://backers.webawesome.com/docs/components/tab
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The tab's label.
|
||||
*
|
||||
* @cssproperty --active-tab-color - The color of the active tab's label.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {},
|
||||
displayName: 'WaTab',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,38 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tag/tag.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaRemoveEvent } from '../../events/events.js';
|
||||
export type { WaRemoveEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-tag';
|
||||
|
||||
/**
|
||||
* @summary Tags are used as labels to organize things or to indicate a selection.
|
||||
* @documentation https://backers.webawesome.com/docs/components/tag
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-button
|
||||
*
|
||||
* @slot - The tag's content.
|
||||
*
|
||||
* @event wa-remove - Emitted when the remove button is activated.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart content - The tag's content.
|
||||
* @csspart remove-button - The tag's remove button, a `<wa-button>`.
|
||||
* @csspart remove-button__base - The remove button's exported `base` part.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaRemove: 'wa-remove' as EventName<WaRemoveEvent>,
|
||||
},
|
||||
displayName: 'WaTag',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,49 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/textarea/textarea.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaInvalidEvent } from '../../events/events.js';
|
||||
export type { WaInvalidEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-textarea';
|
||||
|
||||
/**
|
||||
* @summary Textareas collect data from the user and allow multiple lines of text.
|
||||
* @documentation https://backers.webawesome.com/docs/components/textarea
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event change - Emitted when an alteration to the control's value is committed by the user.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
* @event input - Emitted when the control receives input.
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @csspart label - The label
|
||||
* @csspart form-control-input - The input's wrapper.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart textarea - The internal `<textarea>` control.
|
||||
* @csspart base - The wrapper around the `<textarea>` control.
|
||||
*
|
||||
* @cssproperty --background-color - The textarea's background color.
|
||||
* @cssproperty --border-color - The color of the textarea's borders.
|
||||
* @cssproperty --border-width - The width of the textarea's borders.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
|
||||
*
|
||||
* @cssstate blank - The textarea is empty.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaInvalid: 'wa-invalid' as EventName<WaInvalidEvent>,
|
||||
},
|
||||
displayName: 'WaTextarea',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,49 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tooltip/tooltip.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
export type { WaAfterHideEvent, WaAfterShowEvent, WaHideEvent, WaShowEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-tooltip';
|
||||
|
||||
/**
|
||||
* @summary Tooltips display additional information based on a specific action.
|
||||
* @documentation https://backers.webawesome.com/docs/components/tooltip
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-popup
|
||||
*
|
||||
* @slot - The tooltip's default slot where any content should live. Interactive content should be avoided.
|
||||
*
|
||||
* @event wa-show - Emitted when the tooltip begins to show.
|
||||
* @event wa-after-show - Emitted after the tooltip has shown and all animations are complete.
|
||||
* @event wa-hide - Emitted when the tooltip begins to hide.
|
||||
* @event wa-after-hide - Emitted after the tooltip has hidden and all animations are complete.
|
||||
*
|
||||
* @csspart base - The component's base wrapper, an `<wa-popup>` element.
|
||||
* @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
|
||||
* @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
|
||||
* @csspart body - The tooltip's body where its content is rendered.
|
||||
*
|
||||
* @cssproperty --background-color - The tooltip's background color.
|
||||
* @cssproperty --border-radius - The radius of the tooltip's corners.
|
||||
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
|
||||
* @cssproperty --padding - The padding within the tooltip.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaShow: 'wa-show' as EventName<WaShowEvent>,
|
||||
onWaAfterShow: 'wa-after-show' as EventName<WaAfterShowEvent>,
|
||||
onWaHide: 'wa-hide' as EventName<WaHideEvent>,
|
||||
onWaAfterHide: 'wa-after-hide' as EventName<WaAfterHideEvent>,
|
||||
},
|
||||
displayName: 'WaTooltip',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,89 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tree-item/tree-item.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type {
|
||||
WaAfterCollapseEvent,
|
||||
WaAfterExpandEvent,
|
||||
WaCollapseEvent,
|
||||
WaExpandEvent,
|
||||
WaLazyChangeEvent,
|
||||
WaLazyLoadEvent,
|
||||
} from '../../events/events.js';
|
||||
export type {
|
||||
WaAfterCollapseEvent,
|
||||
WaAfterExpandEvent,
|
||||
WaCollapseEvent,
|
||||
WaExpandEvent,
|
||||
WaLazyChangeEvent,
|
||||
WaLazyLoadEvent,
|
||||
} from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-tree-item';
|
||||
|
||||
/**
|
||||
* @summary A tree item serves as a hierarchical node that lives inside a [tree](/docs/components/tree).
|
||||
* @documentation https://backers.webawesome.com/docs/components/tree-item
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-checkbox
|
||||
* @dependency wa-icon
|
||||
* @dependency wa-spinner
|
||||
*
|
||||
* @event wa-expand - Emitted when the tree item expands.
|
||||
* @event wa-after-expand - Emitted after the tree item expands and all animations are complete.
|
||||
* @event wa-collapse - Emitted when the tree item collapses.
|
||||
* @event wa-after-collapse - Emitted after the tree item collapses and all animations are complete.
|
||||
* @event wa-lazy-change - Emitted when the tree item's lazy state changes.
|
||||
* @event wa-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append
|
||||
* items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading
|
||||
* state and update the tree.
|
||||
*
|
||||
* @slot - The default slot.
|
||||
* @slot expand-icon - The icon to show when the tree item is expanded.
|
||||
* @slot collapse-icon - The icon to show when the tree item is collapsed.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
|
||||
* @csspart indentation - The tree item's indentation container.
|
||||
* @csspart expand-button - The container that wraps the tree item's expand button and spinner.
|
||||
* @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.
|
||||
* @csspart spinner__base - The spinner's base part.
|
||||
* @csspart label - The tree item's label.
|
||||
* @csspart children - The container that wraps the tree item's nested children.
|
||||
* @csspart checkbox - The checkbox that shows when using multiselect.
|
||||
* @csspart checkbox__base - The checkbox's exported `base` part.
|
||||
* @csspart checkbox__control - The checkbox's exported `control` part.
|
||||
* @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
|
||||
* @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
|
||||
* @csspart checkbox__label - The checkbox's exported `label` part.
|
||||
*
|
||||
* @cssproperty --selection-background-color - The background color of selected tree items.
|
||||
* @cssproperty --selection-indicator-color - The color the indicator for selected tree items.
|
||||
* @cssproperty --expand-button-color - The color of the expand button.
|
||||
* @cssproperty [--show-duration=200ms] - The animation duration when expanding tree items.
|
||||
* @cssproperty [--hide-duration=200ms] - The animation duration when collapsing tree items.
|
||||
*
|
||||
* @cssstate disabled - Applied when the tree item is disabled.
|
||||
* @cssstate expanded - Applied when the tree item is expanded.
|
||||
* @cssstate indeterminate - Applied when the selection is indeterminate.
|
||||
* @cssstate selected - Applied when the tree item is selected.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaExpand: 'wa-expand' as EventName<WaExpandEvent>,
|
||||
onWaAfterExpand: 'wa-after-expand' as EventName<WaAfterExpandEvent>,
|
||||
onWaCollapse: 'wa-collapse' as EventName<WaCollapseEvent>,
|
||||
onWaAfterCollapse: 'wa-after-collapse' as EventName<WaAfterCollapseEvent>,
|
||||
onWaLazyChange: 'wa-lazy-change' as EventName<WaLazyChangeEvent>,
|
||||
onWaLazyLoad: 'wa-lazy-load' as EventName<WaLazyLoadEvent>,
|
||||
},
|
||||
displayName: 'WaTreeItem',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
@@ -1,44 +0,0 @@
|
||||
import { createComponent } from '@lit/react';
|
||||
import * as React from 'react';
|
||||
import Component from '../../components/tree/tree.js';
|
||||
|
||||
import { type EventName } from '@lit/react';
|
||||
import type { WaSelectionChangeEvent } from '../../events/events.js';
|
||||
export type { WaSelectionChangeEvent } from '../../events/events.js';
|
||||
|
||||
const tagName = 'wa-tree';
|
||||
|
||||
/**
|
||||
* @summary Trees allow you to display a hierarchical list of selectable [tree items](/docs/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
|
||||
* @documentation https://backers.webawesome.com/docs/components/tree
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-tree-item
|
||||
*
|
||||
* @event {{ selection: WaTreeItem[] }} wa-selection-change - Emitted when a tree item is selected or deselected.
|
||||
*
|
||||
* @slot - The default slot.
|
||||
* @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<wa-icon>`.
|
||||
* @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<wa-icon>`.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty [--indent-size=var(--wa-spacing-m)] - The size of the indentation for nested items.
|
||||
* @cssproperty [--indent-guide-color=var(--wa-color-surface-border)] - The color of the indentation line.
|
||||
* @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
|
||||
* indentation line's starting position.
|
||||
* @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.
|
||||
* @cssproperty [--indent-guide-width=0] - The width of the indentation line.
|
||||
*/
|
||||
const reactWrapper = createComponent({
|
||||
tagName,
|
||||
elementClass: Component,
|
||||
react: React,
|
||||
events: {
|
||||
onWaSelectionChange: 'wa-selection-change' as EventName<WaSelectionChangeEvent>,
|
||||
},
|
||||
displayName: 'WaTree',
|
||||
});
|
||||
|
||||
export default reactWrapper;
|
||||
Reference in New Issue
Block a user