@rogieking/figui3 1.6.3 → 1.6.4
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.
- package/components.css +24 -7
- package/end-point-line.svg +3 -0
- package/end-points/chevron.svg +9 -0
- package/end-points/end-points.html +114 -0
- package/end-points/icon.24.stroke-diamond-arrow.svg +3 -0
- package/end-points/icon.24.stroke.cap-round.svg +4 -0
- package/end-points.zip +0 -0
- package/fig.js +0 -48
- package/package.json +1 -1
- package/test.html +0 -39
package/components.css
CHANGED
|
@@ -745,6 +745,7 @@ fig-button {
|
|
|
745
745
|
&[variant="input"] {
|
|
746
746
|
background-color: var(--figma-color-bg-secondary);
|
|
747
747
|
box-shadow: none;
|
|
748
|
+
color: var(--figma-color-text);
|
|
748
749
|
}
|
|
749
750
|
|
|
750
751
|
/* Icon only */
|
|
@@ -1314,22 +1315,38 @@ input[type="checkbox"].switch:checked:focus {
|
|
|
1314
1315
|
|
|
1315
1316
|
/* Checkbox */
|
|
1316
1317
|
input[type="checkbox"]:not(.switch) {
|
|
1318
|
+
--size: 1rem;
|
|
1319
|
+
--checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' /%3E%3C/svg%3E%0A");
|
|
1317
1320
|
appearance: none;
|
|
1318
1321
|
border-radius: var(--radius-medium);
|
|
1319
|
-
width:
|
|
1320
|
-
height:
|
|
1322
|
+
width: var(--size);
|
|
1323
|
+
height: var(--size);
|
|
1324
|
+
aspect-ratio: 1/1;
|
|
1321
1325
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1322
1326
|
background-color: var(--figma-color-bg-secondary);
|
|
1323
1327
|
vertical-align: middle;
|
|
1324
1328
|
|
|
1325
|
-
|
|
1326
|
-
|
|
1329
|
+
&::after {
|
|
1330
|
+
content: "";
|
|
1331
|
+
width: var(--size);
|
|
1332
|
+
height: var(--size);
|
|
1333
|
+
background-color: transparent;
|
|
1334
|
+
mask-image: var(--checkmark);
|
|
1335
|
+
}
|
|
1336
|
+
&:hover:not(:checked) {
|
|
1337
|
+
&::after {
|
|
1338
|
+
opacity: 0.25;
|
|
1339
|
+
background-color: var(--figma-color-icon);
|
|
1340
|
+
}
|
|
1327
1341
|
}
|
|
1328
1342
|
|
|
1329
1343
|
&:checked {
|
|
1330
1344
|
background-color: var(--figma-color-bg-brand);
|
|
1331
1345
|
box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
|
|
1332
|
-
background-image:
|
|
1346
|
+
background-image: var(--light-checkmark);
|
|
1347
|
+
&::after {
|
|
1348
|
+
background-color: var(--figma-color-icon-onbrand);
|
|
1349
|
+
}
|
|
1333
1350
|
}
|
|
1334
1351
|
|
|
1335
1352
|
&:focus {
|
|
@@ -1779,7 +1796,7 @@ fig-slider {
|
|
|
1779
1796
|
}
|
|
1780
1797
|
|
|
1781
1798
|
&[variant="minimal"] {
|
|
1782
|
-
--slider-height: 0.
|
|
1799
|
+
--slider-height: 0.375rem;
|
|
1783
1800
|
--slider-thumb-size: 0.75rem;
|
|
1784
1801
|
--slider-tick-size: calc(var(--slider-height) / 2);
|
|
1785
1802
|
--handle-transition: none;
|
|
@@ -2108,7 +2125,7 @@ fig-input-color {
|
|
|
2108
2125
|
fig-header {
|
|
2109
2126
|
height: var(--spacer-6);
|
|
2110
2127
|
margin: 0;
|
|
2111
|
-
padding: var(--spacer-1) var(--spacer-3);
|
|
2128
|
+
padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
|
|
2112
2129
|
display: flex;
|
|
2113
2130
|
align-items: center;
|
|
2114
2131
|
box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
|
|
@@ -0,0 +1,9 @@
|
|
|
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>
|
|
@@ -0,0 +1,114 @@
|
|
|
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>
|
|
@@ -0,0 +1,3 @@
|
|
|
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>
|
|
@@ -0,0 +1,4 @@
|
|
|
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>
|
package/end-points.zip
ADDED
|
Binary file
|
package/fig.js
CHANGED
|
@@ -509,54 +509,6 @@ class FigDialog extends HTMLElement {
|
|
|
509
509
|
}
|
|
510
510
|
customElements.define("fig-dialog", FigDialog);
|
|
511
511
|
|
|
512
|
-
/*
|
|
513
|
-
class FigDialog extends FigTooltip {
|
|
514
|
-
|
|
515
|
-
constructor() {
|
|
516
|
-
super()
|
|
517
|
-
this.action = this.getAttribute("action") || "click"
|
|
518
|
-
this.delay = parseInt(this.getAttribute("delay")) || 0
|
|
519
|
-
this.dialog = document.createElement("dialog")
|
|
520
|
-
this.header = document.createElement("fig-header")
|
|
521
|
-
this.header.innerHTML = `<span>${this.getAttribute("title") || "Title"}</span>`
|
|
522
|
-
if (this.getAttribute("closebutton") !== "false") {
|
|
523
|
-
this.closeButton = document.createElement("fig-button")
|
|
524
|
-
this.closeButton.setAttribute("icon", "true")
|
|
525
|
-
this.closeButton.setAttribute("variant", "ghost")
|
|
526
|
-
this.closeButton.setAttribute("fig-dialog-close", "true")
|
|
527
|
-
let closeIcon = document.createElement("fig-icon")
|
|
528
|
-
closeIcon.setAttribute("class", "close")
|
|
529
|
-
this.closeButton.append(closeIcon)
|
|
530
|
-
this.header.append(this.closeButton)
|
|
531
|
-
}
|
|
532
|
-
this.dialog.append(this.header)
|
|
533
|
-
}
|
|
534
|
-
render() {
|
|
535
|
-
this.popup = this.popup || this.dialog
|
|
536
|
-
document.body.append(this.popup)
|
|
537
|
-
}
|
|
538
|
-
setup() {
|
|
539
|
-
this.dialog.querySelectorAll("[fig-dialog-close]").forEach(e => e.addEventListener("click", this.hidePopup.bind(this)))
|
|
540
|
-
this.dialog.append(this.querySelector("fig-content") || "")
|
|
541
|
-
}
|
|
542
|
-
hidePopup() {
|
|
543
|
-
this.popup.close()
|
|
544
|
-
}
|
|
545
|
-
showPopup() {
|
|
546
|
-
this.popup.style.zIndex = parseInt((new Date()).getTime() / 1000)
|
|
547
|
-
if (this.getAttribute("modal") === "true") {
|
|
548
|
-
this.popup.showModal()
|
|
549
|
-
} else {
|
|
550
|
-
this.popup.show()
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
destroy() {
|
|
554
|
-
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
customElements.define("fig-dialog", FigDialog);
|
|
558
|
-
*/
|
|
559
|
-
|
|
560
512
|
class FigPopover2 extends HTMLElement {
|
|
561
513
|
#popover;
|
|
562
514
|
#trigger;
|
package/package.json
CHANGED
package/test.html
DELETED
|
@@ -1,39 +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="fig.css">
|
|
12
|
-
<script src="fig.js"></script>
|
|
13
|
-
<style>
|
|
14
|
-
body {
|
|
15
|
-
width: 480px;
|
|
16
|
-
margin: 0 auto;
|
|
17
|
-
}
|
|
18
|
-
</style>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<fig-content>
|
|
23
|
-
<fig-slider type="delta"
|
|
24
|
-
value=".25"
|
|
25
|
-
default="2"
|
|
26
|
-
step="0.1"
|
|
27
|
-
max="5"
|
|
28
|
-
min="-5">
|
|
29
|
-
</fig-slider>
|
|
30
|
-
</fig-content>
|
|
31
|
-
<script>
|
|
32
|
-
let elements = Array.from(document.querySelectorAll('*'));
|
|
33
|
-
elements.filter(n => n.tagName.toLowerCase().indexOf("fig-") > -1).forEach(n => n.addEventListener('input', (e) => {
|
|
34
|
-
console.log('input:', n.tagName, e.target)
|
|
35
|
-
}))
|
|
36
|
-
</script>
|
|
37
|
-
</body>
|
|
38
|
-
|
|
39
|
-
</html>
|