@rettangoli/ui 0.1.16 → 0.1.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.
|
@@ -67,6 +67,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
67
67
|
font-weight: var(--xs-font-weight);
|
|
68
68
|
line-height: var(--xs-line-height);
|
|
69
69
|
letter-spacing: var(--xs-letter-spacing);
|
|
70
|
+
gap: var(--spacing-sm);
|
|
70
71
|
`,md:`
|
|
71
72
|
height: 32px;
|
|
72
73
|
padding-left: 16px;
|
|
@@ -76,6 +77,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
76
77
|
font-weight: var(--sm-font-weight);
|
|
77
78
|
line-height: var(--sm-line-height);
|
|
78
79
|
letter-spacing: var(--sm-letter-spacing);
|
|
80
|
+
gap: var(--spacing-md);
|
|
79
81
|
`,lg:`
|
|
80
82
|
height: 40px;
|
|
81
83
|
padding-left: 20px;
|
|
@@ -85,6 +87,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
85
87
|
font-weight: var(--md-font-weight);
|
|
86
88
|
line-height: var(--md-line-height);
|
|
87
89
|
letter-spacing: var(--md-letter-spacing);
|
|
90
|
+
gap: var(--spacing-md);
|
|
88
91
|
`},v:{pr:`
|
|
89
92
|
background-color: var(--primary);
|
|
90
93
|
color: var(--primary-foreground);
|
|
@@ -127,7 +130,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
127
130
|
flex-direction: row;
|
|
128
131
|
align-items: center;
|
|
129
132
|
justify-content: center;
|
|
130
|
-
gap: var(--spacing-
|
|
133
|
+
gap: var(--spacing-md);
|
|
131
134
|
border-width: 0px;
|
|
132
135
|
border-style: solid;
|
|
133
136
|
border-color: var(--border);
|
|
@@ -258,7 +261,7 @@ var rettangoli=(()=>{function a(i,...t){let e="";return i.forEach((s,o)=>{e+=s+(
|
|
|
258
261
|
|
|
259
262
|
${N}
|
|
260
263
|
${_}
|
|
261
|
-
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","
|
|
264
|
+
`))}constructor(){super(),i.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[i.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","icon","disabled","v","s","sq","ip"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,e,s){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this.hasAttribute("sq")||this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let e=this.getAttribute("href");if(e){let s=document.createElement("a");s.setAttribute("href",e);let o=this.getAttribute("target");o&&s.setAttribute("target",o),s.appendChild(this._buttonElement),this.shadow.appendChild(s),this._containerElement=s}else this.shadow.appendChild(this._buttonElement),this._containerElement=this._buttonElement}_updateIcon(){this._iconElement&&(this._iconElement.remove(),this._iconElement=null);let t=this.getAttribute("icon");if(t){let e={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},s={sm:14,md:18,lg:22},o=e[this.getAttribute("v")]||"pr-fg",n=18;if(this.hasAttribute("sq")){let c={sm:14,lg:22},h=this.getAttribute("s");n=c[h]||18}else n=s[this.getAttribute("s")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",o),this._iconElement.setAttribute("wh",n.toString()),this.getAttribute("ip")==="s"?this._buttonElement.insertBefore(this._iconElement,this._slotElement):this._buttonElement.appendChild(this._iconElement)}}_updateWidth(){let t=p(this.getAttribute("w"));t==="f"?this._buttonElement.style.width="var(--width-stretch)":t!=null?(this._buttonElement.style.width=t,this._buttonElement.style.minWidth=t,this._buttonElement.style.maxWidth=t):(this._buttonElement.style.width="",this._buttonElement.style.minWidth="",this._buttonElement.style.maxWidth="")}getBoundingClientRect(){return this._buttonElement?this._buttonElement.getBoundingClientRect():super.getBoundingClientRect()}},P=({render:i,html:t})=>j;var R=a`
|
|
262
265
|
|
|
263
266
|
:host([d="h"]) {
|
|
264
267
|
flex-direction: row;
|
|
@@ -67,6 +67,7 @@ var rettangoli=(()=>{var ei=Object.defineProperty;var N=(e,t)=>{for(var r in t)e
|
|
|
67
67
|
font-weight: var(--xs-font-weight);
|
|
68
68
|
line-height: var(--xs-line-height);
|
|
69
69
|
letter-spacing: var(--xs-letter-spacing);
|
|
70
|
+
gap: var(--spacing-sm);
|
|
70
71
|
`,md:`
|
|
71
72
|
height: 32px;
|
|
72
73
|
padding-left: 16px;
|
|
@@ -76,6 +77,7 @@ var rettangoli=(()=>{var ei=Object.defineProperty;var N=(e,t)=>{for(var r in t)e
|
|
|
76
77
|
font-weight: var(--sm-font-weight);
|
|
77
78
|
line-height: var(--sm-line-height);
|
|
78
79
|
letter-spacing: var(--sm-letter-spacing);
|
|
80
|
+
gap: var(--spacing-md);
|
|
79
81
|
`,lg:`
|
|
80
82
|
height: 40px;
|
|
81
83
|
padding-left: 20px;
|
|
@@ -85,6 +87,7 @@ var rettangoli=(()=>{var ei=Object.defineProperty;var N=(e,t)=>{for(var r in t)e
|
|
|
85
87
|
font-weight: var(--md-font-weight);
|
|
86
88
|
line-height: var(--md-line-height);
|
|
87
89
|
letter-spacing: var(--md-letter-spacing);
|
|
90
|
+
gap: var(--spacing-md);
|
|
88
91
|
`},v:{pr:`
|
|
89
92
|
background-color: var(--primary);
|
|
90
93
|
color: var(--primary-foreground);
|
|
@@ -127,7 +130,7 @@ var rettangoli=(()=>{var ei=Object.defineProperty;var N=(e,t)=>{for(var r in t)e
|
|
|
127
130
|
flex-direction: row;
|
|
128
131
|
align-items: center;
|
|
129
132
|
justify-content: center;
|
|
130
|
-
gap: var(--spacing-
|
|
133
|
+
gap: var(--spacing-md);
|
|
131
134
|
border-width: 0px;
|
|
132
135
|
border-style: solid;
|
|
133
136
|
border-color: var(--border);
|
|
@@ -258,7 +261,7 @@ var rettangoli=(()=>{var ei=Object.defineProperty;var N=(e,t)=>{for(var r in t)e
|
|
|
258
261
|
|
|
259
262
|
${yr}
|
|
260
263
|
${ve}
|
|
261
|
-
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","
|
|
264
|
+
`))}constructor(){super(),e.initializeStyleSheet(),this.shadow=this.attachShadow({mode:"closed"}),this.shadow.adoptedStyleSheets=[e.styleSheet],this._containerElement=null,this._buttonElement=document.createElement("button"),this._slotElement=document.createElement("slot"),this._iconElement=null,this._buttonElement.appendChild(this._slotElement)}static get observedAttributes(){return["key","href","target","w","icon","disabled","v","s","sq","ip"]}connectedCallback(){this._updateButton()}attributeChangedCallback(t,r,s){this._updateButton()}_updateButton(){this.shadow.innerHTML="",this._updateIcon(),this.hasAttribute("sq")||this._updateWidth(),this.hasAttribute("disabled")?this._buttonElement.setAttribute("disabled",""):this._buttonElement.removeAttribute("disabled");let r=this.getAttribute("href");if(r){let s=document.createElement("a");s.setAttribute("href",r);let i=this.getAttribute("target");i&&s.setAttribute("target",i),s.appendChild(this._buttonElement),this.shadow.appendChild(s),this._containerElement=s}else this.shadow.appendChild(this._buttonElement),this._containerElement=this._buttonElement}_updateIcon(){this._iconElement&&(this._iconElement.remove(),this._iconElement=null);let t=this.getAttribute("icon");if(t){let r={pr:"pr-fg",se:"ac-fg",de:"pr-fg",ol:"ac-fg",gh:"ac-fg",lk:"ac-fg"},s={sm:14,md:18,lg:22},i=r[this.getAttribute("v")]||"pr-fg",n=18;if(this.hasAttribute("sq")){let a={sm:14,lg:22},l=this.getAttribute("s");n=a[l]||18}else n=s[this.getAttribute("s")]||18;this._iconElement=document.createElement("rtgl-svg"),this._iconElement.setAttribute("svg",t),this._iconElement.setAttribute("c",i),this._iconElement.setAttribute("wh",n.toString()),this.getAttribute("ip")==="s"?this._buttonElement.insertBefore(this._iconElement,this._slotElement):this._buttonElement.appendChild(this._iconElement)}}_updateWidth(){let t=F(this.getAttribute("w"));t==="f"?this._buttonElement.style.width="var(--width-stretch)":t!=null?(this._buttonElement.style.width=t,this._buttonElement.style.minWidth=t,this._buttonElement.style.maxWidth=t):(this._buttonElement.style.width="",this._buttonElement.style.minWidth="",this._buttonElement.style.maxWidth="")}getBoundingClientRect(){return this._buttonElement?this._buttonElement.getBoundingClientRect():super.getBoundingClientRect()}},mr=({render:e,html:t})=>tt;var gr=T`
|
|
262
265
|
|
|
263
266
|
:host([d="h"]) {
|
|
264
267
|
flex-direction: row;
|
package/package.json
CHANGED
package/src/primitives/button.js
CHANGED
|
@@ -23,7 +23,7 @@ class RettangoliButtonElement extends HTMLElement {
|
|
|
23
23
|
flex-direction: row;
|
|
24
24
|
align-items: center;
|
|
25
25
|
justify-content: center;
|
|
26
|
-
gap: var(--spacing-
|
|
26
|
+
gap: var(--spacing-md);
|
|
27
27
|
border-width: 0px;
|
|
28
28
|
border-style: solid;
|
|
29
29
|
border-color: var(--border);
|
|
@@ -174,7 +174,7 @@ class RettangoliButtonElement extends HTMLElement {
|
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
static get observedAttributes() {
|
|
177
|
-
return ["key", "href", "target", "w", "
|
|
177
|
+
return ["key", "href", "target", "w", "icon", "disabled", "v", "s", "sq", "ip"];
|
|
178
178
|
}
|
|
179
179
|
|
|
180
180
|
connectedCallback() {
|
|
@@ -244,7 +244,7 @@ class RettangoliButtonElement extends HTMLElement {
|
|
|
244
244
|
gh: 'ac-fg',
|
|
245
245
|
lk: 'ac-fg'
|
|
246
246
|
};
|
|
247
|
-
const
|
|
247
|
+
const iconSizeMap = {
|
|
248
248
|
sm: 14,
|
|
249
249
|
md: 18,
|
|
250
250
|
lg: 22
|
|
@@ -261,7 +261,7 @@ class RettangoliButtonElement extends HTMLElement {
|
|
|
261
261
|
const buttonSize = this.getAttribute("s");
|
|
262
262
|
size = buttonSizeMap[buttonSize] || 18;
|
|
263
263
|
} else {
|
|
264
|
-
size =
|
|
264
|
+
size = iconSizeMap[this.getAttribute("s")] || 18;
|
|
265
265
|
}
|
|
266
266
|
|
|
267
267
|
this._iconElement = document.createElement('rtgl-svg');
|
|
@@ -18,6 +18,7 @@ const styles = {
|
|
|
18
18
|
font-weight: var(--xs-font-weight);
|
|
19
19
|
line-height: var(--xs-line-height);
|
|
20
20
|
letter-spacing: var(--xs-letter-spacing);
|
|
21
|
+
gap: var(--spacing-sm);
|
|
21
22
|
`,
|
|
22
23
|
md: `
|
|
23
24
|
height: 32px;
|
|
@@ -28,6 +29,7 @@ const styles = {
|
|
|
28
29
|
font-weight: var(--sm-font-weight);
|
|
29
30
|
line-height: var(--sm-line-height);
|
|
30
31
|
letter-spacing: var(--sm-letter-spacing);
|
|
32
|
+
gap: var(--spacing-md);
|
|
31
33
|
`,
|
|
32
34
|
lg: `
|
|
33
35
|
height: 40px;
|
|
@@ -38,6 +40,7 @@ const styles = {
|
|
|
38
40
|
font-weight: var(--md-font-weight);
|
|
39
41
|
line-height: var(--md-line-height);
|
|
40
42
|
letter-spacing: var(--md-letter-spacing);
|
|
43
|
+
gap: var(--spacing-md);
|
|
41
44
|
`,
|
|
42
45
|
},
|
|
43
46
|
v: {
|