feat: add htmx-toasts slots

katallaxie · web-flow · commit d13209a06e1e · 2024-11-06T09:26:05.000Z
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,7 @@
     "plugin:github/typescript"
   ],
   "globals": {
-    "ExampleElement": "readonly"
+    "HTMXToastsElement": "readonly"
   },
   "overrides": [
     {
diff --git a/README.md b/README.md
@@ -7,6 +7,31 @@
 
 This is a simple HTMX element that can be used to display toasts in your web application.
 
+## Usage
+
+```html
+<template id="htmx-toasts-template">
+  <div class="alert" slot="alert">
+    <span slot="message"></span>
+    <button type="button" class="btn btn-sm btn-outline" aria-label="Close" slot="close">Close</button>
+  </div>
+</template>
+<htmx-toasts timeout="3000" class="toast" role="status" aria-live="polite" error-class="alert-error"
+      info-class="alert-info" warn-class="alert-warning"></htmx-toasts>
+```
+
+## Installation
+
+```bash
+npm install @htmx/template-element
+```
+
+```html
+<script src="https://unpkg.com/@htmx/htmx-toasts@latest/dist/index.js" type="module"></script>
+```
+
+```bash
+
 ## License
 
 [MIT](/LICENSE)
diff --git a/examples/index.html b/examples/index.html
@@ -1,13 +1,22 @@
 <!doctype html>
-<html>
-  <head>
-    <title>example-element examples</title>
-    <link href="https://unpkg.com/fiber-htmx@1.3.32/dist/out.css" rel="stylesheet">
-  </head>
-  <body>
-    <div class="container py-4">
-      <example-element></example-element>
-    </div>
+<html data-theme="light">
+
+<head>
+  <title>htmx-toasts examples</title>
+  <link href="https://unpkg.com/fiber-htmx@1.3.32/dist/out.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="container py-4">
+    <template id="htmx-toasts-template">
+      <div class="alert" slot="alert">
+        <span slot="message"></span>
+        <button type="button" class="btn btn-sm btn-outline" aria-label="Close" slot="close">Close</button>
+      </div>
+    </template>
+    <htmx-toasts timeout="10000" class="toast" role="status" aria-live="polite" error-class="alert-error"
+      info-class="alert-info" warn-class="alert-warning"></htmx-toasts>
+    <button class="btn" onclick="notify()">Notify</button>
     <script>
       const script = document.createElement('script')
       if (window.location.hostname.endsWith('github.io') || window.location.hostname.endsWith('github.com')) {
@@ -18,5 +27,16 @@
       script.type = 'module'
       document.body.appendChild(script)
     </script>
-  </body>
+    <script>
+      function notify() {
+        window.dispatchEvent(new CustomEvent('htmx-toasts:notify', {
+          detail: {
+            message: 'Hello, World!',
+            level: 'error'
+          }
+        }))
+      }
+    </script>
+</body>
+
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "@htmx/template-element",
+  "name": "@htmx/htmx-toasts",
   "version": "1.0.0",
-  "description": "A custom element for adding a toolbar to a textarea for markdown editing.",
-  "repository": "zeiss/template-element",
+  "description": "A simple toast notification system for htmx",
+  "repository": "zeiss/htmx-toasts",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
-    "dev": "http-server",
+    "dev": "tsc-watch --onSuccess 'http-server . --port 8080 -c-1'",
     "lint": "eslint src/*.ts",
     "prebuild": "npm run clean && npm run lint && mkdir dist",
     "build": "tsc",
@@ -36,6 +36,7 @@
     "eslint-plugin-github": "^5.0.2",
     "http-server": "^14.1.1",
     "jsdom": "^25.0.1",
+    "tsc-watch": "^6.2.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",
     "vitest": "^2.1.4"
diff --git a/src/index.spec.ts b/src/index.spec.ts
@@ -2,7 +2,7 @@ import {fixture, html} from '@open-wc/testing-helpers'
 import {HTMXToastsElement} from './index'
 import {describe, it, expect, beforeEach} from 'vitest'
 
-describe('example-element', () => {
+describe('htmx-toasts', () => {
   let element: HTMXToastsElement
 
   beforeEach(async () => {
diff --git a/src/index.ts b/src/index.ts

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`"plugin:github/typescript"`
`7`	`7`	`],`
`8`	`8`	`"globals": {`
`9`		`- "ExampleElement": "readonly"`
	`9`	`+ "HTMXToastsElement": "readonly"`
`10`	`10`	`},`
`11`	`11`	`"overrides": [`
`12`	`12`	`{`