Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gsmlg-dev/phoenix-duskmoon-ui
Duskmoon UI for Phoenix Framework
https://github.com/gsmlg-dev/phoenix-duskmoon-ui
duskmoon elixir phoenix phoenix-livecomponents web-components
Last synced: 6 days ago
JSON representation
Duskmoon UI for Phoenix Framework
- Host: GitHub
- URL: https://github.com/gsmlg-dev/phoenix-duskmoon-ui
- Owner: gsmlg-dev
- Created: 2022-04-16T12:49:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-09T02:17:31.000Z (about 2 months ago)
- Last Synced: 2024-09-28T03:27:09.611Z (7 days ago)
- Topics: duskmoon, elixir, phoenix, phoenix-livecomponents, web-components
- Language: Elixir
- Homepage: https://duskmoon-storybook.gsmlg.dev/
- Size: 10.7 MB
- Stars: 81
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PhoenixDuskmoon
[](https://github.com/gsmlg-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml)
Collection of helpers to generate and manipulate Web Component.
Although this project was originally extracted from Phoenix,
it does not depend on Phoenix and can be used with any Plug
application (or even without Plug).
See the [docs](https://hexdocs.pm/phoenix_duskmoon/) for more information.
About at [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
## Install
Add deps in `mix.exs`
```elixir
{:phoenix_duskmoon, "~> 4.0"},
```
Include in phoenix view helpers
```elixir
defp html_helpers do
quote do
# import all helper functions
use PhoenixDuskmoon
# or
use PhoenixDuskmoon, :alias
...
end
end
```
Include `javascript`
```javascript
import 'phoenix_duskmoon';
```
Web Componet library is now external
```bash
npm install @gsmlg/lit
```
Import `css`
```css
@import 'phoenix_duskmoon/priv/static/phoenix_duskmoon.css';
```
Use custom hook
```javascript
import "phoenix_duskmoon";
const WebComponentHook = window.__WebComponentHook__;
const liveSocket = new LiveSocket("/live", Socket, {hooks: { WebComponentHook }});
```
Send custom events to live view:
```html
```
- In the first element, when element trigger customEvents `sync-content`, also use `pushEvent` send `load_content` to live view.
- Second element are same as first, but will call `loadAccepted` on element when receive server send feedback.
Receive live view event:
```html
```
- In this case, when live view fire `update_content` event, also trigger `updateContent` method on elmenet.
- If value(`updateContent`) is empty, trigger a same event `update_content` on element.
Import CSS
```css
import "phoenix_duskmoon/priv/static/phoenix_duskmoon.css"
```
## Live Storybook
[Live Storybook](https://duskmoon-storybook.gsmlg.dev)
