@rogieking/figui3 1.0.16 → 1.0.17

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 (3) hide show
  1. package/example.html +2 -1
  2. package/fig.js +25 -0
  3. package/package.json +1 -1
package/example.html CHANGED
@@ -48,8 +48,9 @@
48
48
  </svg>
49
49
  </fig-button>
50
50
  <fig-tooltip text="Toggle off/on">
51
- <fig-button variant="toggle"
51
+ <fig-button variant="ghost"
52
52
  icon="true"
53
+ type="toggle"
53
54
  selected="true">
54
55
  <svg width="24"
55
56
  height="24"
package/fig.js CHANGED
@@ -8,6 +8,8 @@ function supportsPopover() {
8
8
 
9
9
  /* Button */
10
10
  class FigButton extends HTMLElement {
11
+ #type
12
+ #selected
11
13
  constructor() {
12
14
  super()
13
15
  this.attachShadow({ mode: 'open' })
@@ -34,7 +36,30 @@ class FigButton extends HTMLElement {
34
36
  <slot></slot>
35
37
  </button>
36
38
  `;
39
+ this.#selected = this.hasAttribute("selected") && this.getAttribute("selected") !== "false"
40
+ this.#type = this.getAttribute("type")
37
41
  this.button = this.shadowRoot.querySelector('button')
42
+ this.addEventListener("click", this.handleClick.bind(this))
43
+ }
44
+ get type() {
45
+ return this.#type
46
+ }
47
+ set type(value) {
48
+ this.#type = value
49
+ this.setAttribute("type", value)
50
+ }
51
+ get selected() {
52
+ return this.#selected
53
+ }
54
+ set selected(value) {
55
+ this.#selected = value
56
+ this.setAttribute("selected", value)
57
+ }
58
+
59
+ handleClick() {
60
+ if (this.#type === "toggle") {
61
+ this.selected = !this.#selected
62
+ }
38
63
  }
39
64
  static get observedAttributes() {
40
65
  return ['disabled'];
package/package.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "1.0.16"
3
+ "version": "1.0.17"
4
4
  }