@fluid-topics/ft-dialog 1.1.64 → 1.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +22 -13
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -11,21 +11,30 @@ yarn add @fluid-topics/ft-dialog
11
11
 
12
12
  ```typescript
13
13
  import { html } from "lit"
14
+ import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
14
15
  import "@fluid-topics/ft-button"
15
16
  import "@fluid-topics/ft-dialog"
16
17
 
17
- function render() {
18
- return html`
19
- <ft-button @click=${ () => document.querySelector<FtDialog>("ft-dialog")?.open() }> Open dialog </ft-button>
20
- <ft-dialog
21
- heading="Dialog Title"
22
- icon="info"
23
- closeOnEsc
24
- closeOnClickOutside
25
- @opened-changed=${ (e: CustomEvent<{ opened: boolean }>) => console.log("opened changed ", e.detail) }
26
- >
27
- Dialog Content
28
- </ft-dialog>
29
- `
18
+ @customElement("my-element")
19
+ class MyElement extends FtLitElement {
20
+
21
+ @state()
22
+ private dialogOpen = false
23
+
24
+ render() {
25
+ return html`
26
+ <ft-button @click=${ () => this.dialogOpen = true }>Open dialog</ft-button>
27
+ <ft-dialog
28
+ ?opened=${ this.dialogOpen }
29
+ heading="Dialog Title"
30
+ icon="info"
31
+ closeOnEsc
32
+ closeOnClickOutside
33
+ @opened-changed=${ (e: CustomEvent<{ opened: boolean }>) => this.dialogOpen = e.detail.opened }>
34
+ Dialog Content
35
+ </ft-dialog>
36
+ `
37
+ }
30
38
  }
39
+
31
40
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-dialog",
3
- "version": "1.1.64",
3
+ "version": "1.1.66",
4
4
  "description": "A simple dialog component",
5
5
  "keywords": [
6
6
  "Lit"
@@ -19,11 +19,11 @@
19
19
  "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
20
20
  },
21
21
  "dependencies": {
22
- "@fluid-topics/ft-button": "1.1.64",
23
- "@fluid-topics/ft-icon": "1.1.64",
24
- "@fluid-topics/ft-typography": "1.1.64",
25
- "@fluid-topics/ft-wc-utils": "1.1.64",
22
+ "@fluid-topics/ft-button": "1.1.66",
23
+ "@fluid-topics/ft-icon": "1.1.66",
24
+ "@fluid-topics/ft-typography": "1.1.66",
25
+ "@fluid-topics/ft-wc-utils": "1.1.66",
26
26
  "lit": "3.1.0"
27
27
  },
28
- "gitHead": "de93ae28828fb464cab528f90580b63cdbbb195b"
28
+ "gitHead": "c7c2a2e66a28387fcdfdc4ba1fc9fdfc65d7b1ac"
29
29
  }