@studious-creative/yumekit 0.1.11 → 0.1.12
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/components/y-appbar.js +2 -1
- package/dist/components/y-input.js +8 -0
- package/dist/components/y-select.js +23 -1
- package/dist/components/y-theme.d.ts +1 -0
- package/dist/components/y-theme.js +17 -0
- package/dist/index.js +50 -2
- package/dist/yumekit.min.js +1 -1
- package/package.json +1 -1
|
@@ -1414,7 +1414,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1414
1414
|
|
|
1415
1415
|
.appbar.vertical .appbar-header {
|
|
1416
1416
|
border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1417
|
-
padding: var(--_appbar-padding);
|
|
1417
|
+
padding: var(--_appbar-padding) 0;
|
|
1418
1418
|
margin-bottom: var(--_appbar-padding);
|
|
1419
1419
|
}
|
|
1420
1420
|
.appbar.vertical .appbar-footer {
|
|
@@ -1426,6 +1426,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1426
1426
|
.appbar.horizontal .appbar-header {
|
|
1427
1427
|
border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1428
1428
|
padding: var(--_appbar-padding);
|
|
1429
|
+
padding-right: var(--spacing-x-large, 16px);
|
|
1429
1430
|
margin-right: var(--_appbar-padding);
|
|
1430
1431
|
}
|
|
1431
1432
|
.appbar.horizontal .appbar-footer {
|
|
@@ -94,6 +94,13 @@ class YumeInput extends HTMLElement {
|
|
|
94
94
|
large: "--component-inputs-padding-large",
|
|
95
95
|
}[size];
|
|
96
96
|
|
|
97
|
+
const minHeightVar =
|
|
98
|
+
{
|
|
99
|
+
small: "var(--sizing-small, 32px)",
|
|
100
|
+
medium: "var(--sizing-medium, 40px)",
|
|
101
|
+
large: "var(--sizing-large, 56px)",
|
|
102
|
+
}[size] || "var(--sizing-medium, 40px)";
|
|
103
|
+
|
|
97
104
|
const sheet = new CSSStyleSheet();
|
|
98
105
|
sheet.replaceSync(`
|
|
99
106
|
:host {
|
|
@@ -119,6 +126,7 @@ class YumeInput extends HTMLElement {
|
|
|
119
126
|
border: var(--component-inputs-border-width) solid var(--component-input-border-color);
|
|
120
127
|
border-radius: var(--component-inputs-border-radius-outer);
|
|
121
128
|
padding: var(${paddingVar});
|
|
129
|
+
min-height: ${minHeightVar};
|
|
122
130
|
box-sizing: border-box;
|
|
123
131
|
transition: border-color 0.2s ease-in-out;
|
|
124
132
|
}
|
|
@@ -25,6 +25,7 @@ class YumeSelect extends HTMLElement {
|
|
|
25
25
|
"options",
|
|
26
26
|
"display-mode",
|
|
27
27
|
"close-on-click-outside",
|
|
28
|
+
"size",
|
|
28
29
|
];
|
|
29
30
|
}
|
|
30
31
|
|
|
@@ -74,6 +75,7 @@ class YumeSelect extends HTMLElement {
|
|
|
74
75
|
"required",
|
|
75
76
|
"placeholder",
|
|
76
77
|
"options",
|
|
78
|
+
"size",
|
|
77
79
|
].includes(name)
|
|
78
80
|
) {
|
|
79
81
|
this.render();
|
|
@@ -257,6 +259,7 @@ class YumeSelect extends HTMLElement {
|
|
|
257
259
|
selected.forEach((opt) => {
|
|
258
260
|
const tag = document.createElement("y-tag");
|
|
259
261
|
tag.setAttribute("removable", "");
|
|
262
|
+
tag.setAttribute("size", "small");
|
|
260
263
|
tag.setAttribute("color", "primary");
|
|
261
264
|
tag.setAttribute("style-type", "filled");
|
|
262
265
|
tag.textContent = opt.label;
|
|
@@ -336,6 +339,21 @@ class YumeSelect extends HTMLElement {
|
|
|
336
339
|
|
|
337
340
|
applyStyles() {
|
|
338
341
|
const isDisabled = this.hasAttribute("disabled");
|
|
342
|
+
const size = this.getAttribute("size") || "medium";
|
|
343
|
+
|
|
344
|
+
const paddingVar =
|
|
345
|
+
{
|
|
346
|
+
small: "--component-inputs-padding-small",
|
|
347
|
+
medium: "--component-inputs-padding-medium",
|
|
348
|
+
large: "--component-inputs-padding-large",
|
|
349
|
+
}[size] || "--component-inputs-padding-medium";
|
|
350
|
+
|
|
351
|
+
const minHeightVar =
|
|
352
|
+
{
|
|
353
|
+
small: "var(--sizing-small, 32px)",
|
|
354
|
+
medium: "var(--sizing-medium, 40px)",
|
|
355
|
+
large: "var(--sizing-large, 56px)",
|
|
356
|
+
}[size] || "var(--sizing-medium, 40px)";
|
|
339
357
|
|
|
340
358
|
const sheet = new CSSStyleSheet();
|
|
341
359
|
sheet.replaceSync(`
|
|
@@ -361,7 +379,8 @@ class YumeSelect extends HTMLElement {
|
|
|
361
379
|
background: var(--component-select-background);
|
|
362
380
|
border: var(--component-inputs-border-width) solid var(--component-select-border-color);
|
|
363
381
|
border-radius: var(--component-inputs-border-radius-outer);
|
|
364
|
-
padding: var(
|
|
382
|
+
padding: var(${paddingVar});
|
|
383
|
+
min-height: ${minHeightVar};
|
|
365
384
|
box-sizing: border-box;
|
|
366
385
|
transition: border-color 0.2s ease-in-out;
|
|
367
386
|
cursor: pointer;
|
|
@@ -433,7 +452,10 @@ class YumeSelect extends HTMLElement {
|
|
|
433
452
|
font-size: 1em;
|
|
434
453
|
color: inherit;
|
|
435
454
|
display: flex;
|
|
455
|
+
flex-wrap: wrap;
|
|
456
|
+
align-items: center;
|
|
436
457
|
gap: var(--spacing-x-small);
|
|
458
|
+
min-height: var(--component-tag-height-small, 22px);
|
|
437
459
|
}
|
|
438
460
|
|
|
439
461
|
.label-wrapper {
|
|
@@ -27,6 +27,7 @@ class YumeTheme extends HTMLElement {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
connectedCallback() {
|
|
30
|
+
this._injectPageStyles();
|
|
30
31
|
this._applyTheme();
|
|
31
32
|
}
|
|
32
33
|
|
|
@@ -89,6 +90,22 @@ class YumeTheme extends HTMLElement {
|
|
|
89
90
|
}
|
|
90
91
|
this._themeProps = [];
|
|
91
92
|
}
|
|
93
|
+
|
|
94
|
+
_injectPageStyles() {
|
|
95
|
+
if (document.querySelector("[data-yumekit-page-styles]")) return;
|
|
96
|
+
const style = document.createElement("style");
|
|
97
|
+
style.setAttribute("data-yumekit-page-styles", "");
|
|
98
|
+
style.textContent = `
|
|
99
|
+
html, body {
|
|
100
|
+
margin: 0;
|
|
101
|
+
padding: 0;
|
|
102
|
+
font-family: var(--font-family-header, "Lexend", sans-serif);
|
|
103
|
+
color: var(--base-content--, #000);
|
|
104
|
+
font-weight: 300;
|
|
105
|
+
}
|
|
106
|
+
`;
|
|
107
|
+
document.head.appendChild(style);
|
|
108
|
+
}
|
|
92
109
|
}
|
|
93
110
|
|
|
94
111
|
if (!customElements.get("y-theme")) {
|
package/dist/index.js
CHANGED
|
@@ -1694,7 +1694,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1694
1694
|
|
|
1695
1695
|
.appbar.vertical .appbar-header {
|
|
1696
1696
|
border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1697
|
-
padding: var(--_appbar-padding);
|
|
1697
|
+
padding: var(--_appbar-padding) 0;
|
|
1698
1698
|
margin-bottom: var(--_appbar-padding);
|
|
1699
1699
|
}
|
|
1700
1700
|
.appbar.vertical .appbar-footer {
|
|
@@ -1706,6 +1706,7 @@ class YumeAppbar extends HTMLElement {
|
|
|
1706
1706
|
.appbar.horizontal .appbar-header {
|
|
1707
1707
|
border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
|
|
1708
1708
|
padding: var(--_appbar-padding);
|
|
1709
|
+
padding-right: var(--spacing-x-large, 16px);
|
|
1709
1710
|
margin-right: var(--_appbar-padding);
|
|
1710
1711
|
}
|
|
1711
1712
|
.appbar.horizontal .appbar-footer {
|
|
@@ -3437,6 +3438,13 @@ class YumeInput extends HTMLElement {
|
|
|
3437
3438
|
large: "--component-inputs-padding-large",
|
|
3438
3439
|
}[size];
|
|
3439
3440
|
|
|
3441
|
+
const minHeightVar =
|
|
3442
|
+
{
|
|
3443
|
+
small: "var(--sizing-small, 32px)",
|
|
3444
|
+
medium: "var(--sizing-medium, 40px)",
|
|
3445
|
+
large: "var(--sizing-large, 56px)",
|
|
3446
|
+
}[size] || "var(--sizing-medium, 40px)";
|
|
3447
|
+
|
|
3440
3448
|
const sheet = new CSSStyleSheet();
|
|
3441
3449
|
sheet.replaceSync(`
|
|
3442
3450
|
:host {
|
|
@@ -3462,6 +3470,7 @@ class YumeInput extends HTMLElement {
|
|
|
3462
3470
|
border: var(--component-inputs-border-width) solid var(--component-input-border-color);
|
|
3463
3471
|
border-radius: var(--component-inputs-border-radius-outer);
|
|
3464
3472
|
padding: var(${paddingVar});
|
|
3473
|
+
min-height: ${minHeightVar};
|
|
3465
3474
|
box-sizing: border-box;
|
|
3466
3475
|
transition: border-color 0.2s ease-in-out;
|
|
3467
3476
|
}
|
|
@@ -4463,6 +4472,7 @@ class YumeSelect extends HTMLElement {
|
|
|
4463
4472
|
"options",
|
|
4464
4473
|
"display-mode",
|
|
4465
4474
|
"close-on-click-outside",
|
|
4475
|
+
"size",
|
|
4466
4476
|
];
|
|
4467
4477
|
}
|
|
4468
4478
|
|
|
@@ -4512,6 +4522,7 @@ class YumeSelect extends HTMLElement {
|
|
|
4512
4522
|
"required",
|
|
4513
4523
|
"placeholder",
|
|
4514
4524
|
"options",
|
|
4525
|
+
"size",
|
|
4515
4526
|
].includes(name)
|
|
4516
4527
|
) {
|
|
4517
4528
|
this.render();
|
|
@@ -4695,6 +4706,7 @@ class YumeSelect extends HTMLElement {
|
|
|
4695
4706
|
selected.forEach((opt) => {
|
|
4696
4707
|
const tag = document.createElement("y-tag");
|
|
4697
4708
|
tag.setAttribute("removable", "");
|
|
4709
|
+
tag.setAttribute("size", "small");
|
|
4698
4710
|
tag.setAttribute("color", "primary");
|
|
4699
4711
|
tag.setAttribute("style-type", "filled");
|
|
4700
4712
|
tag.textContent = opt.label;
|
|
@@ -4774,6 +4786,21 @@ class YumeSelect extends HTMLElement {
|
|
|
4774
4786
|
|
|
4775
4787
|
applyStyles() {
|
|
4776
4788
|
const isDisabled = this.hasAttribute("disabled");
|
|
4789
|
+
const size = this.getAttribute("size") || "medium";
|
|
4790
|
+
|
|
4791
|
+
const paddingVar =
|
|
4792
|
+
{
|
|
4793
|
+
small: "--component-inputs-padding-small",
|
|
4794
|
+
medium: "--component-inputs-padding-medium",
|
|
4795
|
+
large: "--component-inputs-padding-large",
|
|
4796
|
+
}[size] || "--component-inputs-padding-medium";
|
|
4797
|
+
|
|
4798
|
+
const minHeightVar =
|
|
4799
|
+
{
|
|
4800
|
+
small: "var(--sizing-small, 32px)",
|
|
4801
|
+
medium: "var(--sizing-medium, 40px)",
|
|
4802
|
+
large: "var(--sizing-large, 56px)",
|
|
4803
|
+
}[size] || "var(--sizing-medium, 40px)";
|
|
4777
4804
|
|
|
4778
4805
|
const sheet = new CSSStyleSheet();
|
|
4779
4806
|
sheet.replaceSync(`
|
|
@@ -4799,7 +4826,8 @@ class YumeSelect extends HTMLElement {
|
|
|
4799
4826
|
background: var(--component-select-background);
|
|
4800
4827
|
border: var(--component-inputs-border-width) solid var(--component-select-border-color);
|
|
4801
4828
|
border-radius: var(--component-inputs-border-radius-outer);
|
|
4802
|
-
padding: var(
|
|
4829
|
+
padding: var(${paddingVar});
|
|
4830
|
+
min-height: ${minHeightVar};
|
|
4803
4831
|
box-sizing: border-box;
|
|
4804
4832
|
transition: border-color 0.2s ease-in-out;
|
|
4805
4833
|
cursor: pointer;
|
|
@@ -4871,7 +4899,10 @@ class YumeSelect extends HTMLElement {
|
|
|
4871
4899
|
font-size: 1em;
|
|
4872
4900
|
color: inherit;
|
|
4873
4901
|
display: flex;
|
|
4902
|
+
flex-wrap: wrap;
|
|
4903
|
+
align-items: center;
|
|
4874
4904
|
gap: var(--spacing-x-small);
|
|
4905
|
+
min-height: var(--component-tag-height-small, 22px);
|
|
4875
4906
|
}
|
|
4876
4907
|
|
|
4877
4908
|
.label-wrapper {
|
|
@@ -6966,6 +6997,7 @@ class YumeTheme extends HTMLElement {
|
|
|
6966
6997
|
}
|
|
6967
6998
|
|
|
6968
6999
|
connectedCallback() {
|
|
7000
|
+
this._injectPageStyles();
|
|
6969
7001
|
this._applyTheme();
|
|
6970
7002
|
}
|
|
6971
7003
|
|
|
@@ -7028,6 +7060,22 @@ class YumeTheme extends HTMLElement {
|
|
|
7028
7060
|
}
|
|
7029
7061
|
this._themeProps = [];
|
|
7030
7062
|
}
|
|
7063
|
+
|
|
7064
|
+
_injectPageStyles() {
|
|
7065
|
+
if (document.querySelector("[data-yumekit-page-styles]")) return;
|
|
7066
|
+
const style = document.createElement("style");
|
|
7067
|
+
style.setAttribute("data-yumekit-page-styles", "");
|
|
7068
|
+
style.textContent = `
|
|
7069
|
+
html, body {
|
|
7070
|
+
margin: 0;
|
|
7071
|
+
padding: 0;
|
|
7072
|
+
font-family: var(--font-family-header, "Lexend", sans-serif);
|
|
7073
|
+
color: var(--base-content--, #000);
|
|
7074
|
+
font-weight: 300;
|
|
7075
|
+
}
|
|
7076
|
+
`;
|
|
7077
|
+
document.head.appendChild(style);
|
|
7078
|
+
}
|
|
7031
7079
|
}
|
|
7032
7080
|
|
|
7033
7081
|
if (!customElements.get("y-theme")) {
|