@rettangoli/ui 1.2.4 → 1.4.0
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/dist/rettangoli-iife-layout.min.js +33 -11
- package/dist/rettangoli-iife-ui.min.js +48 -26
- package/dist/themes/theme-catppuccin.css +2 -0
- package/dist/themes/theme-rtgl-mono.css +2 -0
- package/dist/themes/theme-rtgl-slate.css +2 -0
- package/package.json +1 -1
- package/src/components/dropdownMenu/dropdownMenu.schema.yaml +6 -0
- package/src/components/dropdownMenu/dropdownMenu.store.js +14 -0
- package/src/components/dropdownMenu/dropdownMenu.view.yaml +44 -4
- package/src/components/select/select.view.yaml +1 -1
- package/src/primitives/popover.js +2 -2
- package/src/primitives/svg.js +25 -0
- package/src/styles/viewStyles.js +4 -0
- package/src/styles/viewStylesForTarget.js +2 -0
- package/src/themes/theme-catppuccin.css +2 -0
- package/src/themes/theme-rtgl-mono.css +2 -0
- package/src/themes/theme-rtgl-slate.css +2 -0
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
--destructive-foreground: #eff1f5;
|
|
77
77
|
|
|
78
78
|
--background: #eff1f5;
|
|
79
|
+
--surface: #eceff4;
|
|
79
80
|
--foreground: #4c4f69;
|
|
80
81
|
--muted: #e6e9ef;
|
|
81
82
|
--muted-foreground: #6c6f85;
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
.dark {
|
|
95
96
|
/* Catppuccin Mocha */
|
|
96
97
|
--background: #1e1e2e;
|
|
98
|
+
--surface: #252536;
|
|
97
99
|
--foreground: #cdd6f4;
|
|
98
100
|
--primary: #89b4fa;
|
|
99
101
|
--primary-foreground: #1e1e2e;
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
--destructive-foreground: #fcf3f3;
|
|
76
76
|
|
|
77
77
|
--background: #fff;
|
|
78
|
+
--surface: #fafafa;
|
|
78
79
|
--foreground: #0a0a0a;
|
|
79
80
|
--muted: #f5f5f5;
|
|
80
81
|
--muted-foreground: #737373;
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
|
|
93
94
|
.dark {
|
|
94
95
|
--background: #0a0a0a;
|
|
96
|
+
--surface: #141414;
|
|
95
97
|
--foreground: #fafafa;
|
|
96
98
|
--primary: #e5e5e5;
|
|
97
99
|
--primary-foreground: #171717;
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
--destructive-foreground: oklch(0.145 0 0);
|
|
76
76
|
|
|
77
77
|
--background: oklch(1 0 0);
|
|
78
|
+
--surface: oklch(0.985 0 0);
|
|
78
79
|
--foreground: oklch(0.145 0 0);
|
|
79
80
|
--muted: oklch(0.97 0 0);
|
|
80
81
|
--muted-foreground: oklch(0.556 0 0);
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
|
|
93
94
|
.dark {
|
|
94
95
|
--background: rgb(29 29 29);
|
|
96
|
+
--surface: rgb(36 36 36);
|
|
95
97
|
--foreground: rgb(242 242 242);
|
|
96
98
|
--primary: oklch(0.922 0 0);
|
|
97
99
|
--primary-foreground: oklch(0.305 0 0);
|
package/package.json
CHANGED
|
@@ -12,9 +12,16 @@ const normalizeItems = (items) => {
|
|
|
12
12
|
const isItem = type === 'item';
|
|
13
13
|
const isDisabled = !!item.disabled;
|
|
14
14
|
const isInteractive = isItem && !isDisabled;
|
|
15
|
+
const hasIconSlot = Object.prototype.hasOwnProperty.call(item, 'icon');
|
|
16
|
+
const icon = typeof item.icon === 'string' && item.icon.length > 0 ? item.icon : '';
|
|
17
|
+
const suffixTextValue = typeof item.shortcut === 'string' && item.shortcut.length > 0
|
|
18
|
+
? item.shortcut
|
|
19
|
+
: (typeof item.suffixText === 'string' && item.suffixText.length > 0 ? item.suffixText : '');
|
|
15
20
|
const c = isDisabled ? 'mu-fg' : 'fg';
|
|
16
21
|
const bgc = isDisabled ? 'mu' : '';
|
|
17
22
|
const hoverBgc = isDisabled ? '' : 'ac';
|
|
23
|
+
const iconColor = c;
|
|
24
|
+
const suffixTextColor = 'mu-fg';
|
|
18
25
|
const hasHref = typeof item.href === 'string' && item.href.length > 0;
|
|
19
26
|
const relValue = item.rel || (item.newTab ? 'noopener noreferrer' : '');
|
|
20
27
|
const linkExtraAttrs = [
|
|
@@ -31,11 +38,18 @@ const normalizeItems = (items) => {
|
|
|
31
38
|
isItem,
|
|
32
39
|
isDisabled,
|
|
33
40
|
isInteractive,
|
|
41
|
+
hasIconSlot,
|
|
42
|
+
icon,
|
|
43
|
+
hasIcon: icon.length > 0,
|
|
44
|
+
suffixText: suffixTextValue,
|
|
45
|
+
hasSuffixText: suffixTextValue.length > 0,
|
|
34
46
|
hasHref,
|
|
35
47
|
linkExtraAttrs,
|
|
36
48
|
c,
|
|
37
49
|
bgc,
|
|
38
50
|
hoverBgc,
|
|
51
|
+
iconColor,
|
|
52
|
+
suffixTextColor,
|
|
39
53
|
};
|
|
40
54
|
});
|
|
41
55
|
};
|
|
@@ -13,6 +13,10 @@ styles:
|
|
|
13
13
|
width: 100%
|
|
14
14
|
text-decoration: none
|
|
15
15
|
color: inherit
|
|
16
|
+
.icon-placeholder:
|
|
17
|
+
width: 16px
|
|
18
|
+
height: 16px
|
|
19
|
+
flex-shrink: 0
|
|
16
20
|
template:
|
|
17
21
|
- rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
|
|
18
22
|
- $for item, i in items:
|
|
@@ -21,17 +25,53 @@ template:
|
|
|
21
25
|
- rtgl-text s=sm c=mu-fg: ${item.label}
|
|
22
26
|
$elif item.isItem && item.isDisabled:
|
|
23
27
|
- rtgl-view w=f p=md bgc=${item.bgc}:
|
|
24
|
-
- rtgl-
|
|
28
|
+
- rtgl-view d=h av=c w=f g=md:
|
|
29
|
+
- rtgl-view d=h av=c g=md w=1fg:
|
|
30
|
+
- $if item.hasIconSlot:
|
|
31
|
+
- $if item.hasIcon:
|
|
32
|
+
- rtgl-svg wh=16 svg=${item.icon} c=${item.iconColor}: null
|
|
33
|
+
$else:
|
|
34
|
+
- div class=icon-placeholder aria-hidden="true": null
|
|
35
|
+
- rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
|
|
36
|
+
- $if item.hasSuffixText:
|
|
37
|
+
- rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
|
|
25
38
|
$elif item.isItem && item.hasHref && item.linkExtraAttrs:
|
|
26
39
|
- a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
|
|
27
40
|
- rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
|
|
28
|
-
- rtgl-
|
|
41
|
+
- rtgl-view d=h av=c w=f g=md:
|
|
42
|
+
- rtgl-view d=h av=c g=md w=1fg:
|
|
43
|
+
- $if item.hasIconSlot:
|
|
44
|
+
- $if item.hasIcon:
|
|
45
|
+
- rtgl-svg wh=16 svg=${item.icon} c=${item.iconColor}: null
|
|
46
|
+
$else:
|
|
47
|
+
- div class=icon-placeholder aria-hidden="true": null
|
|
48
|
+
- rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
|
|
49
|
+
- $if item.hasSuffixText:
|
|
50
|
+
- rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
|
|
29
51
|
$elif item.isItem && item.hasHref:
|
|
30
52
|
- a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
|
|
31
53
|
- rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
|
|
32
|
-
- rtgl-
|
|
54
|
+
- rtgl-view d=h av=c w=f g=md:
|
|
55
|
+
- rtgl-view d=h av=c g=md w=1fg:
|
|
56
|
+
- $if item.hasIconSlot:
|
|
57
|
+
- $if item.hasIcon:
|
|
58
|
+
- rtgl-svg wh=16 svg=${item.icon} c=${item.iconColor}: null
|
|
59
|
+
$else:
|
|
60
|
+
- div class=icon-placeholder aria-hidden="true": null
|
|
61
|
+
- rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
|
|
62
|
+
- $if item.hasSuffixText:
|
|
63
|
+
- rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
|
|
33
64
|
$elif item.isItem:
|
|
34
65
|
- rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
|
|
35
|
-
- rtgl-
|
|
66
|
+
- rtgl-view d=h av=c w=f g=md:
|
|
67
|
+
- rtgl-view d=h av=c g=md w=1fg:
|
|
68
|
+
- $if item.hasIconSlot:
|
|
69
|
+
- $if item.hasIcon:
|
|
70
|
+
- rtgl-svg wh=16 svg=${item.icon} c=${item.iconColor}: null
|
|
71
|
+
$else:
|
|
72
|
+
- div class=icon-placeholder aria-hidden="true": null
|
|
73
|
+
- rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
|
|
74
|
+
- $if item.hasSuffixText:
|
|
75
|
+
- rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
|
|
36
76
|
$elif item.isSeparator:
|
|
37
77
|
- rtgl-view w=f h=1 bgc=mu mv=sm: null
|
|
@@ -30,7 +30,7 @@ refs:
|
|
|
30
30
|
mouseleave:
|
|
31
31
|
handler: handleAddOptionMouseLeave
|
|
32
32
|
template:
|
|
33
|
-
- 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=
|
|
33
|
+
- 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=su cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
|
|
34
34
|
- rtgl-view d=h av=c ah=s w=f:
|
|
35
35
|
- rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
|
|
36
36
|
- $if showClear:
|
|
@@ -195,7 +195,7 @@ class RettangoliPopoverElement extends HTMLElement {
|
|
|
195
195
|
this._contentWrapper = document.createElement("rtgl-view");
|
|
196
196
|
this._contentWrapper.setAttribute(CONTENT_WRAPPER_ATTR, "");
|
|
197
197
|
this._contentWrapper.setAttribute("part", "content");
|
|
198
|
-
this._contentWrapper.setAttribute("bgc", "
|
|
198
|
+
this._contentWrapper.setAttribute("bgc", "su");
|
|
199
199
|
this._contentWrapper.setAttribute("bw", "xs");
|
|
200
200
|
this._contentWrapper.setAttribute("bc", "bo");
|
|
201
201
|
this._contentWrapper.setAttribute("br", "md");
|
|
@@ -231,7 +231,7 @@ class RettangoliPopoverElement extends HTMLElement {
|
|
|
231
231
|
}
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "
|
|
234
|
+
wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "su");
|
|
235
235
|
wrapper.setAttribute("ph", "sm");
|
|
236
236
|
wrapper.setAttribute("pv", this.getAttribute("content-pv") || "sm");
|
|
237
237
|
|
package/src/primitives/svg.js
CHANGED
|
@@ -14,9 +14,29 @@ class RettangoliSvgElement extends HTMLElement {
|
|
|
14
14
|
RettangoliSvgElement.styleSheet = new CSSStyleSheet();
|
|
15
15
|
RettangoliSvgElement.styleSheet.replaceSync(css`
|
|
16
16
|
:host {
|
|
17
|
+
display: contents;
|
|
17
18
|
color: var(--foreground);
|
|
18
19
|
flex-shrink: 0;
|
|
19
20
|
}
|
|
21
|
+
|
|
22
|
+
svg {
|
|
23
|
+
display: inline-block;
|
|
24
|
+
width: inherit;
|
|
25
|
+
height: inherit;
|
|
26
|
+
min-width: inherit;
|
|
27
|
+
min-height: inherit;
|
|
28
|
+
max-width: inherit;
|
|
29
|
+
max-height: inherit;
|
|
30
|
+
margin-top: inherit;
|
|
31
|
+
margin-right: inherit;
|
|
32
|
+
margin-bottom: inherit;
|
|
33
|
+
margin-left: inherit;
|
|
34
|
+
color: inherit;
|
|
35
|
+
cursor: inherit;
|
|
36
|
+
flex-shrink: inherit;
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
}
|
|
39
|
+
|
|
20
40
|
${textColorStyles}
|
|
21
41
|
${paddingSvgStyles}
|
|
22
42
|
${marginStyles}
|
|
@@ -72,6 +92,11 @@ class RettangoliSvgElement extends HTMLElement {
|
|
|
72
92
|
}
|
|
73
93
|
}
|
|
74
94
|
|
|
95
|
+
getBoundingClientRect() {
|
|
96
|
+
const svgElement = this.shadow.querySelector("svg");
|
|
97
|
+
return svgElement ? svgElement.getBoundingClientRect() : super.getBoundingClientRect();
|
|
98
|
+
}
|
|
99
|
+
|
|
75
100
|
_render() {
|
|
76
101
|
try {
|
|
77
102
|
const iconName = this.getAttribute("svg");
|
package/src/styles/viewStyles.js
CHANGED
|
@@ -26,6 +26,9 @@ const styles = {
|
|
|
26
26
|
bg: `
|
|
27
27
|
background-color: var(--background);
|
|
28
28
|
`,
|
|
29
|
+
su: `
|
|
30
|
+
background-color: var(--surface);
|
|
31
|
+
`,
|
|
29
32
|
mu: `
|
|
30
33
|
background-color: var(--muted);
|
|
31
34
|
`,
|
|
@@ -98,6 +101,7 @@ const styles = {
|
|
|
98
101
|
de: "--destructive",
|
|
99
102
|
fg: "--foreground",
|
|
100
103
|
bg: "--background",
|
|
104
|
+
su: "--surface",
|
|
101
105
|
mu: "--muted",
|
|
102
106
|
ac: "--accent",
|
|
103
107
|
bo: "--border",
|
|
@@ -16,6 +16,7 @@ const styles = {
|
|
|
16
16
|
de: `background-color: var(--destructive);`,
|
|
17
17
|
fg: `background-color: var(--foreground);`,
|
|
18
18
|
bg: `background-color: var(--background);`,
|
|
19
|
+
su: `background-color: var(--surface);`,
|
|
19
20
|
mu: `background-color: var(--muted);`,
|
|
20
21
|
ac: `background-color: var(--accent);`,
|
|
21
22
|
bo: `background-color: var(--border);`,
|
|
@@ -41,6 +42,7 @@ const styles = {
|
|
|
41
42
|
de: "--destructive",
|
|
42
43
|
fg: "--foreground",
|
|
43
44
|
bg: "--background",
|
|
45
|
+
su: "--surface",
|
|
44
46
|
mu: "--muted",
|
|
45
47
|
ac: "--accent",
|
|
46
48
|
bo: "--border",
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
--destructive-foreground: #eff1f5;
|
|
77
77
|
|
|
78
78
|
--background: #eff1f5;
|
|
79
|
+
--surface: #eceff4;
|
|
79
80
|
--foreground: #4c4f69;
|
|
80
81
|
--muted: #e6e9ef;
|
|
81
82
|
--muted-foreground: #6c6f85;
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
.dark {
|
|
95
96
|
/* Catppuccin Mocha */
|
|
96
97
|
--background: #1e1e2e;
|
|
98
|
+
--surface: #252536;
|
|
97
99
|
--foreground: #cdd6f4;
|
|
98
100
|
--primary: #89b4fa;
|
|
99
101
|
--primary-foreground: #1e1e2e;
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
--destructive-foreground: #fcf3f3;
|
|
76
76
|
|
|
77
77
|
--background: #fff;
|
|
78
|
+
--surface: #fafafa;
|
|
78
79
|
--foreground: #0a0a0a;
|
|
79
80
|
--muted: #f5f5f5;
|
|
80
81
|
--muted-foreground: #737373;
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
|
|
93
94
|
.dark {
|
|
94
95
|
--background: #0a0a0a;
|
|
96
|
+
--surface: #141414;
|
|
95
97
|
--foreground: #fafafa;
|
|
96
98
|
--primary: #e5e5e5;
|
|
97
99
|
--primary-foreground: #171717;
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
--destructive-foreground: oklch(0.145 0 0);
|
|
76
76
|
|
|
77
77
|
--background: oklch(1 0 0);
|
|
78
|
+
--surface: oklch(0.985 0 0);
|
|
78
79
|
--foreground: oklch(0.145 0 0);
|
|
79
80
|
--muted: oklch(0.97 0 0);
|
|
80
81
|
--muted-foreground: oklch(0.556 0 0);
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
|
|
93
94
|
.dark {
|
|
94
95
|
--background: rgb(29 29 29);
|
|
96
|
+
--surface: rgb(36 36 36);
|
|
95
97
|
--foreground: rgb(242 242 242);
|
|
96
98
|
--primary: oklch(0.922 0 0);
|
|
97
99
|
--primary-foreground: oklch(0.305 0 0);
|