@rettangoli/ui 1.3.0 → 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 +30 -10
- package/dist/rettangoli-iife-ui.min.js +45 -25
- 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/primitives/svg.js +25 -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
|
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");
|