@rogieking/figui3 1.6.8 → 1.6.9

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 (7) hide show
  1. package/fig.js +24 -9
  2. package/package.json +1 -1
  3. package/charli.jpeg +0 -0
  4. package/end-points/chevron.svg +0 -9
  5. package/end-points/end-points.html +0 -114
  6. package/end-points/icon.24.stroke-diamond-arrow.svg +0 -3
  7. package/end-points/icon.24.stroke.cap-round.svg +0 -4
package/fig.js CHANGED
@@ -1031,7 +1031,6 @@ class FigInputText extends HTMLElement {
1031
1031
  if (this.type === "number") {
1032
1032
  value = value / (this.transform || 1);
1033
1033
  value = this.#sanitizeInput(value, false);
1034
- console.log("sanitizeInput", value);
1035
1034
  valueTransformed = value * (this.transform || 1);
1036
1035
  }
1037
1036
  this.value = value;
@@ -1796,6 +1795,7 @@ window.customElements.define("fig-chit", FigChit);
1796
1795
  * @attr {string} size - Size of the image preview
1797
1796
  */
1798
1797
  class FigImage extends HTMLElement {
1798
+ #src = null;
1799
1799
  constructor() {
1800
1800
  super();
1801
1801
  }
@@ -1838,9 +1838,6 @@ class FigImage extends HTMLElement {
1838
1838
  this.#handleFileInput.bind(this)
1839
1839
  );
1840
1840
  }
1841
- if (this.src) {
1842
- this.#loadImage(this.src);
1843
- }
1844
1841
  });
1845
1842
  }
1846
1843
  async #loadImage(src) {
@@ -1848,13 +1845,23 @@ class FigImage extends HTMLElement {
1848
1845
  await new Promise((resolve) => {
1849
1846
  this.image = new Image();
1850
1847
  this.image.crossOrigin = "Anonymous";
1851
-
1848
+ console.log("loading image", this.src);
1852
1849
  this.image.onload = async () => {
1853
1850
  this.aspectRatio = this.image.width / this.image.height;
1854
1851
  this.style.setProperty(
1855
1852
  "--aspect-ratio",
1856
1853
  `${this.image.width}/${this.image.height}`
1857
1854
  );
1855
+ this.dispatchEvent(
1856
+ new CustomEvent("loaded", {
1857
+ bubbles: true,
1858
+ cancelable: true,
1859
+ detail: {
1860
+ blob: this.blob,
1861
+ base64: this.base64,
1862
+ },
1863
+ })
1864
+ );
1858
1865
  resolve();
1859
1866
 
1860
1867
  // Create canvas to extract blob and base64 from image
@@ -1905,18 +1912,26 @@ class FigImage extends HTMLElement {
1905
1912
  cancelable: true,
1906
1913
  })
1907
1914
  );
1908
- this.src = this.blob;
1909
- this.setAttribute("src", this.src);
1910
- this.chit.setAttribute("src", this.src);
1915
+ this.setAttribute("src", this.blob);
1911
1916
  }
1912
1917
  static get observedAttributes() {
1913
1918
  return ["src", "upload"];
1914
1919
  }
1920
+ get src() {
1921
+ return this.#src;
1922
+ }
1923
+ set src(value) {
1924
+ this.#src = value;
1925
+ }
1926
+
1915
1927
  attributeChangedCallback(name, oldValue, newValue) {
1916
1928
  if (name === "src") {
1917
1929
  this.src = newValue;
1918
1930
  if (this.chit) {
1919
- this.chit.setAttribute("src", this.src);
1931
+ this.chit.setAttribute("src", this.#src);
1932
+ }
1933
+ if (this.#src) {
1934
+ this.#loadImage(this.#src);
1920
1935
  }
1921
1936
  }
1922
1937
  if (name === "upload") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "1.6.8",
3
+ "version": "1.6.9",
4
4
  "module": "index.ts",
5
5
  "type": "module",
6
6
  "devDependencies": {
package/charli.jpeg DELETED
Binary file
package/end-points/chevron.svg DELETED
@@ -1,9 +0,0 @@
1
- <svg width="24"
2
- height="24"
3
- viewBox="0 0 24 24"
4
- fill="none"
5
- xmlns="http://www.w3.org/2000/svg">
6
- <path d="M13.6465 11.1465C13.8417 10.9512 14.1583 10.9512 14.3535 11.1465C14.5488 11.3417 14.5488 11.6583 14.3535 11.8535L12.3535 13.8535C12.1583 14.0488 11.8417 14.0488 11.6465 13.8535L9.64648 11.8535C9.45122 11.6583 9.45122 11.3417 9.64648 11.1465C9.84175 10.9512 10.1583 10.9512 10.3535 11.1465L12 12.793L13.6465 11.1465Z"
7
- fill="black"
8
- fill-opacity="0.9" />
9
- </svg>
package/end-points/end-points.html DELETED
@@ -1,114 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport"
7
- content="width=device-width, initial-scale=1.0">
8
- <title>Figma UI3 Web Components</title>
9
- <link rel="stylesheet"
10
- type="text/css"
11
- href="https://unpkg.com/@rogieking/figui3@latest/fig.css">
12
- <style>
13
- /* Ignore these styles. They are mostly used to recreate the look of a dropdown */
14
- body {
15
- width: 480px;
16
- margin: 0 auto;
17
- padding: 0 2rem;
18
- }
19
-
20
- .dropdown {
21
-
22
- height: var(--spacer-4);
23
- padding: 0;
24
- border-radius: var(--radius-medium);
25
- display: inline-flex;
26
- appearance: none;
27
- align-items: center;
28
- width: 40vw;
29
- flex: 1 0 0;
30
- border: 0;
31
- color: var(--figma-color-text);
32
- background-color: var(--figma-color-bg);
33
- box-shadow: inset 0 0 0 1px var(--figma-color-border);
34
- accent-color: var(--figma-color-bg-brand);
35
- overflow: hidden;
36
- white-space: nowrap;
37
- text-overflow: ellipsis;
38
- background-image: url(chevron.svg);
39
- background-repeat: no-repeat;
40
- background-position: right center;
41
- background-size: 24px;
42
- padding-right: 24px;
43
- margin: 0.5rem 0;
44
-
45
- label {
46
- display: block;
47
- flex-grow: 1;
48
- flex-shrink: 1;
49
- text-align: left;
50
- overflow: hidden;
51
- padding: 0;
52
- color: var(--figma-color-text);
53
- text-overflow: ellipsis;
54
- white-space: nowrap;
55
- }
56
- }
57
-
58
- /* Style to reference */
59
- .stretch-icon {
60
- display: block;
61
- flex-shrink: 0;
62
- flex-basis: 24px;
63
- width: 24px;
64
- border: 12px solid black;
65
- box-sizing: border-box;
66
- /* top | right | bottom | left */
67
- border-image-slice: 12;
68
- border-image-repeat: repeat;
69
-
70
- &.cap-diamond {
71
- border-image-source: url(icon.24.stroke-diamond-arrow.svg);
72
- }
73
-
74
- &.cap-round {
75
- border-image-source: url(icon.24.stroke.cap-round.svg);
76
- }
77
-
78
- &.grow {
79
- flex-grow: 1;
80
- }
81
- }
82
- </style>
83
- </head>
84
-
85
- <body>
86
- <fig-content>
87
-
88
- <div class="dropdown">
89
- <div class="stretch-icon cap-diamond"></div>
90
- <label>Diamond arrow with a label</label>
91
- </div>
92
- <br />
93
- <div class="dropdown">
94
- <div class="stretch-icon cap-diamond grow"></div>
95
- </div>
96
- <br />
97
- <div class="dropdown">
98
- <div class="stretch-icon cap-round">
99
- </div>
100
- <label>Round with a label</label>
101
- </div>
102
- <br />
103
- <div class="dropdown">
104
- <div class="stretch-icon cap-round grow">
105
- </div>
106
- </div>
107
-
108
- </fig-content>
109
-
110
-
111
-
112
- </body>
113
-
114
- </html>
package/end-points/icon.24.stroke-diamond-arrow.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M6.79297 7.29297C7.18349 6.90244 7.81651 6.90244 8.20703 7.29297L11.9141 11H28.5C28.7761 11 28.9999 11.2239 29 11.5C29 11.7761 28.7761 12 28.5 12H11.9141L8.20703 15.707C7.81651 16.0976 7.18349 16.0976 6.79297 15.707L3.29297 12.207L3.22461 12.1309C2.90426 11.7381 2.92685 11.1591 3.29297 10.793L6.79297 7.29297ZM4 11.5L7.5 15L11 11.5L7.5 8L4 11.5Z" fill="black" fill-opacity="0.9"/>
3
- </svg>
package/end-points/icon.24.stroke.cap-round.svg DELETED
@@ -1,4 +0,0 @@
1
- <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M10 7C7.23858 7 5 9.23858 5 12C5 14.7614 7.23858 17 10 17H26.5C26.7761 17 27 16.7761 27 16.5C27 16.2239 26.7761 16 26.5 16H10C7.79086 16 6 14.2091 6 12C6 9.79086 7.79086 8 10 8H26.5C26.7761 8 27 7.77614 27 7.5C27 7.22386 26.7761 7 26.5 7H10Z" fill="black" fill-opacity="0.9"/>
3
- <path d="M25.7734 11.5C25.4973 11.5 25.2734 11.7239 25.2734 12C25.2734 12.2761 25.4973 12.5 25.7734 12.5H26.5C26.7761 12.5 27 12.2761 27 12C27 11.7239 26.7761 11.5 26.5 11.5H25.7734ZM21.8984 11.5C21.6223 11.5 21.3984 11.7239 21.3984 12C21.3984 12.2761 21.6223 12.5 21.8984 12.5H23.3516C23.6277 12.5 23.8516 12.2761 23.8516 12C23.8516 11.7239 23.6277 11.5 23.3516 11.5H21.8984ZM18.0234 11.5C17.7473 11.5 17.5234 11.7239 17.5234 12C17.5234 12.2761 17.7473 12.5 18.0234 12.5H19.4766C19.7527 12.5 19.9766 12.2761 19.9766 12C19.9766 11.7239 19.7527 11.5 19.4766 11.5H18.0234ZM14.1484 11.5C13.8723 11.5 13.6484 11.7239 13.6484 12C13.6484 12.2761 13.8723 12.5 14.1484 12.5H15.6016C15.8777 12.5 16.1016 12.2761 16.1016 12C16.1016 11.7239 15.8777 11.5 15.6016 11.5H14.1484ZM11 11.5C10.7239 11.5 10.5 11.7239 10.5 12C10.5 12.2761 10.7239 12.5 11 12.5H11.7266C12.0027 12.5 12.2266 12.2761 12.2266 12C12.2266 11.7239 12.0027 11.5 11.7266 11.5H11Z" fill="black" fill-opacity="0.3"/>
4
- </svg>