Cory LaViska e1bf5471bf Use native events when possible (#590)
* fix filename

* <wa-input> input + change (change not working)

* compose that horribly misleading change event

* use native blur/focus events

* update checkbox

* update color picker events

* update color picker events

* update radio group events

* update button events

* remove event options

* update select events

* update image comparer events

* update icon button events

* update slider events

* update rating events

* update radio events

* update switch event

* update textarea events

* update radio button events

* remove unused events

* cleanup

* fix react wrappers

* fix react events for real this time

* update changelog

* add note

* Update src/components/input/input.ts

Co-authored-by: Lea Verou <lea@verou.me>

* delete unused close event

* use same event type

* fix tests

* remove wa- from events in docs and examples

* fix comment

* Update docs/docs/resources/changelog.md

Co-authored-by: Lea Verou <lea@verou.me>

---------

Co-authored-by: Lea Verou <lea@verou.me>
2025-01-23 17:52:41 -05:00
2025-01-06 13:13:34 -05:00
2022-08-26 09:16:57 -04:00
2024-09-11 10:25:42 -04:00
2024-04-17 11:20:27 -04:00
2024-12-17 14:27:33 -05:00
2023-09-05 12:01:19 -04:00
2025-01-17 10:40:54 -05:00
2025-01-17 10:40:54 -05:00
2024-09-24 09:23:58 -04:00
2023-12-08 15:09:34 -05:00
2025-01-06 13:24:54 -05:00
2025-01-06 13:13:34 -05:00

Web Awesome

  • Works with all frameworks 🧩
  • Works with CDNs 🚛
  • Fully customizable with CSS 🎨
  • Includes an official dark theme 🌛
  • Built with accessibility in mind
  • Open source 😸

Built by the folks behind Font Awesome.


Documentation: webawesome.com

Source: github.com/shoelace-style/webawesome

Twitter: @webawesomer


Developers

Developers can use this documentation to learn how to build Web Awesome from source. You will need Node >= 14.17 to build and run the project locally.

You don't need to do any of this to use Web Awesome! This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.

If that's not what you're trying to do, the documentation website is where you want to be.

What are you using to build Web Awesome?

Components are built with LitElement, a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by esbuild.

Forking the Repo

Start by forking the repo on GitHub, then clone it locally and install dependencies.

git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome
cd webawesome
npm install

Developing

Once you've cloned the repo, run the following command.

npm start

This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.

Building

To generate a production build, run the following command.

npm run build

You can also run npm run build:serve to start an http-server instance on http://localhost:4000 after the build completes, so you can preview the production build.

Creating New Components

To scaffold a new component, run the following command, replacing wa-tag-name with the desired tag name.

npm run create wa-tag-name

This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.

Contributing

Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the contribution guidelines first.

License

Web Awesome is available under the terms of the MIT license.

Description
No description provided
Readme 130 MiB
Languages
TypeScript 64.5%
Nunjucks 17.4%
CSS 11.8%
JavaScript 6.2%