@trenoxxious/n-components 1.0.0 → 1.0.2
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/index.html +51 -9
- package/package.json +30 -27
- package/src/components/n-button.ts +48 -14
- package/src/index.css +91 -8
package/index.html
CHANGED
|
@@ -17,16 +17,58 @@
|
|
|
17
17
|
</h1>
|
|
18
18
|
<p>Light-weight web components for use with vanilla HTML, JS and CSS.</p>
|
|
19
19
|
</header>
|
|
20
|
-
<p class="sec">You want some buttons? We have some cool buttons.</p>
|
|
21
|
-
<div
|
|
22
|
-
<div class="
|
|
23
|
-
<div>
|
|
24
|
-
Base Buttons
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
<p class="sec">You want some buttons? We have some cool, customizable buttons.</p>
|
|
21
|
+
<div class="components-grid">
|
|
22
|
+
<div class="component-card">
|
|
23
|
+
<div class="component-header">
|
|
24
|
+
<h3>Base Buttons</h3>
|
|
25
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">variant=</span><span class="html-green">"info"</span>><pre>More Info</pre></<span class="html-red">n-button</span>></div>
|
|
26
|
+
<n-button variant="info">More Info</n-button>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="button-grid">
|
|
29
|
+
<n-button variant="normal">Normal</n-button>
|
|
30
|
+
<n-button variant="info">Info</n-button>
|
|
29
31
|
<n-button variant="warning">Warning</n-button>
|
|
32
|
+
<n-button variant="alert">Alert</n-button>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="component-card">
|
|
36
|
+
<div class="component-header">
|
|
37
|
+
<h3>Thin Buttons</h3>
|
|
38
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">variant=</span><span class="html-green">"warning"</span> <span class="html-orange">thin</span>><pre>A warning!</pre></<span class="html-red">n-button</span>></div>
|
|
39
|
+
<n-button variant="warning" thin>A warning!</n-button>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="button-grid">
|
|
42
|
+
<n-button variant="normal" thin>Thin</n-button>
|
|
43
|
+
<n-button variant="info" thin>Thin</n-button>
|
|
44
|
+
<n-button variant="warning" thin>Thin</n-button>
|
|
45
|
+
<n-button variant="alert" thin>Thin</n-button>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="component-card">
|
|
49
|
+
<div class="component-header">
|
|
50
|
+
<h3>Thick Buttons</h3>
|
|
51
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">thick</span>><pre>Play</pre></<span class="html-red">n-button</span>></div>
|
|
52
|
+
<n-button thick>Play</n-button>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="button-grid">
|
|
55
|
+
<n-button variant="normal" thick>Thick</n-button>
|
|
56
|
+
<n-button variant="info" thick>Thick</n-button>
|
|
57
|
+
<n-button variant="warning" thick>Thick</n-button>
|
|
58
|
+
<n-button variant="alert" thick>Thick</n-button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="component-card">
|
|
62
|
+
<div class="component-header">
|
|
63
|
+
<h3>Outlined Buttons, w/ Dark Mode</h3>
|
|
64
|
+
<div class="code w-full"><<span class="html-red">n-button</span> <span class="html-orange">outlineOnly dark thin</span>><pre>Go!</pre></<span class="html-red">n-button</span>></div>
|
|
65
|
+
<n-button outlineOnly dark thin>Go!</n-button>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="button-grid">
|
|
68
|
+
<n-button variant="normal" outlineOnly dark>Outlined</n-button>
|
|
69
|
+
<n-button variant="info" outlineOnly dark>Outlined</n-button>
|
|
70
|
+
<n-button variant="warning" outlineOnly dark>Outlined</n-button>
|
|
71
|
+
<n-button variant="alert" outlineOnly dark>Outlined</n-button>
|
|
30
72
|
</div>
|
|
31
73
|
</div>
|
|
32
74
|
</div>
|
package/package.json
CHANGED
|
@@ -1,28 +1,31 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
"name": "@trenoxxious/n-components",
|
|
3
|
+
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
|
+
"private": false,
|
|
5
|
+
"version": "1.0.2",
|
|
6
|
+
"repository": "github:Trenoxxious/n-components",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"web-components",
|
|
9
|
+
"lit-element"
|
|
10
|
+
],
|
|
11
|
+
"type": "module",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./dist/index.js",
|
|
14
|
+
"./n-button": "./dist/components/n-button.js"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"dev": "vite",
|
|
18
|
+
"build": "tsc && vite build",
|
|
19
|
+
"preview": "vite preview"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"lit": "^3.3.1"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"typescript": "~5.9.3",
|
|
26
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
27
|
+
},
|
|
28
|
+
"overrides": {
|
|
29
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -9,56 +9,77 @@ export class NButton extends LitElement {
|
|
|
9
9
|
thin: { type: Boolean },
|
|
10
10
|
thick: { type: Boolean },
|
|
11
11
|
outlineOnly: { type: Boolean },
|
|
12
|
+
rounded: { type: Boolean },
|
|
13
|
+
sharp: { type: Boolean },
|
|
12
14
|
scaleHover: { type: Boolean },
|
|
15
|
+
dark: { type: Boolean },
|
|
13
16
|
};
|
|
14
17
|
|
|
15
|
-
variant: '
|
|
18
|
+
variant: 'normal' | 'info' | 'warning' | 'alert' = 'normal';
|
|
16
19
|
thin = false;
|
|
17
20
|
thick = false;
|
|
18
21
|
outlineOnly = false;
|
|
19
22
|
scaleHover = false;
|
|
23
|
+
rounded = false;
|
|
24
|
+
sharp = false;
|
|
25
|
+
dark = false;
|
|
20
26
|
animation: 'fast' | 'normal' | 'slow' | 'extra-slow' = 'normal';
|
|
21
27
|
|
|
22
28
|
static styles = css`
|
|
23
29
|
button {
|
|
24
30
|
padding: 8px 16px;
|
|
25
31
|
border: none;
|
|
26
|
-
border-radius: 4px;
|
|
27
32
|
cursor: pointer;
|
|
28
33
|
font-size: 14px;
|
|
29
|
-
font-weight:
|
|
34
|
+
font-weight: 400;
|
|
35
|
+
border-radius: 2px;
|
|
30
36
|
transition: all;
|
|
31
37
|
animation-duration: 0.3s;
|
|
38
|
+
min-width: 100px;
|
|
32
39
|
}
|
|
33
40
|
|
|
34
|
-
button.
|
|
41
|
+
button.info {
|
|
35
42
|
background-color: #007bff;
|
|
36
43
|
color: white;
|
|
37
44
|
border: 1px solid #2c92ffff;
|
|
38
45
|
}
|
|
39
46
|
|
|
40
|
-
button.
|
|
41
|
-
background-color: #
|
|
47
|
+
button.info:hover {
|
|
48
|
+
background-color: #268fffff;
|
|
49
|
+
border: 1px solid #4da3ffff;
|
|
42
50
|
}
|
|
43
51
|
|
|
44
|
-
button.
|
|
45
|
-
background-color: #
|
|
46
|
-
color: #
|
|
52
|
+
button.normal {
|
|
53
|
+
background-color: #e0e0e0;
|
|
54
|
+
color: #242424ff;
|
|
47
55
|
border: 1px solid #ddd;
|
|
48
56
|
}
|
|
49
57
|
|
|
50
|
-
button.
|
|
51
|
-
background-color: #
|
|
58
|
+
button.normal:hover {
|
|
59
|
+
background-color: #f5f5f5ff;
|
|
60
|
+
border: 1px solid #ffffffff;
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
button.warning {
|
|
55
|
-
background-color: rgba(
|
|
64
|
+
background-color: rgba(241, 132, 7, 1);
|
|
56
65
|
color: white;
|
|
57
66
|
border: 1px solid rgba(248, 142, 42, 1);
|
|
58
67
|
}
|
|
59
68
|
|
|
60
69
|
button.warning:hover {
|
|
61
|
-
background-color: rgba(
|
|
70
|
+
background-color: rgba(240, 162, 16, 1);
|
|
71
|
+
border: 1px solid rgba(255, 184, 53, 1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
button.alert {
|
|
75
|
+
background-color: rgba(233, 30, 23, 1);
|
|
76
|
+
color: white;
|
|
77
|
+
border: 1px solid rgba(248, 49, 42, 1);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
button.alert:hover {
|
|
81
|
+
background-color: rgba(248, 44, 44, 1);
|
|
82
|
+
border: 1px solid rgba(255, 76, 76, 1);
|
|
62
83
|
}
|
|
63
84
|
|
|
64
85
|
button.thin {
|
|
@@ -93,6 +114,14 @@ export class NButton extends LitElement {
|
|
|
93
114
|
transition: all 1s;
|
|
94
115
|
}
|
|
95
116
|
|
|
117
|
+
.rounded {
|
|
118
|
+
border-radius: 4px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.sharp {
|
|
122
|
+
border-radius: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
96
125
|
@media screen and (width <= 1024px) {
|
|
97
126
|
button {
|
|
98
127
|
font-size: 12px;
|
|
@@ -101,6 +130,11 @@ export class NButton extends LitElement {
|
|
|
101
130
|
`;
|
|
102
131
|
|
|
103
132
|
render() {
|
|
104
|
-
|
|
133
|
+
const color = this.variant === 'normal' && this.dark ? 'white' : '';
|
|
134
|
+
return html`<button
|
|
135
|
+
class="${this.variant}${this.thin && !this.thick ? ' thin' : this.thick ? ' thick' : ''}${this.outlineOnly ? ' outline-only' : ''}${this.scaleHover ? ' scale-hover' : ''}${this.rounded && !this.sharp ? ' rounded' : this.sharp ? ' sharp' : ''} animation-${this.animation}"
|
|
136
|
+
style="${color ? `color: ${color}` : ''}">
|
|
137
|
+
<slot></slot>
|
|
138
|
+
</button>`;
|
|
105
139
|
}
|
|
106
140
|
}
|
package/src/index.css
CHANGED
|
@@ -67,18 +67,101 @@ header p {
|
|
|
67
67
|
font-weight: 400;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
.
|
|
70
|
+
.components-grid {
|
|
71
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
72
|
+
display: grid;
|
|
73
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
74
|
+
gap: 24px;
|
|
75
|
+
max-width: 1200px;
|
|
76
|
+
margin: 0 auto;
|
|
77
|
+
padding: 0 20px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.component-card {
|
|
71
81
|
display: flex;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
gap: 16px;
|
|
84
|
+
padding: 24px;
|
|
85
|
+
background: rgba(36, 36, 36, 0.6);
|
|
86
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
89
|
+
transition: border-color 0.2s ease;
|
|
76
90
|
}
|
|
77
91
|
|
|
78
|
-
.
|
|
92
|
+
.component-header {
|
|
79
93
|
display: flex;
|
|
80
|
-
flex-direction:
|
|
81
|
-
gap:
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
gap: 12px;
|
|
96
|
+
align-items: flex-start;
|
|
97
|
+
padding-bottom: 12px;
|
|
98
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.component-header h3 {
|
|
102
|
+
margin: 0;
|
|
103
|
+
font-size: 1.25rem;
|
|
104
|
+
font-weight: 500;
|
|
105
|
+
color: rgba(255, 255, 255, 0.95);
|
|
106
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.button-grid {
|
|
110
|
+
display: grid;
|
|
111
|
+
grid-template-columns: repeat(2, 1fr);
|
|
112
|
+
gap: 12px;
|
|
113
|
+
padding: 16px;
|
|
114
|
+
background: rgba(24, 38, 51, 0.4);
|
|
115
|
+
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
116
|
+
border-radius: 4px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.button-grid n-button {
|
|
120
|
+
padding: 8px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.code {
|
|
124
|
+
text-wrap: nowrap;
|
|
125
|
+
text-align: left;
|
|
126
|
+
overflow-x: auto;
|
|
127
|
+
display: inline;
|
|
128
|
+
justify-content: flex-start;
|
|
129
|
+
align-items: center;
|
|
130
|
+
padding: 5px 5px 0 5px;
|
|
131
|
+
background: rgba(255, 255, 255, 0.05);
|
|
132
|
+
border-radius: 4px;
|
|
133
|
+
font-size: 1rem;
|
|
134
|
+
height: 100px;
|
|
135
|
+
color: rgba(194, 194, 194, 1);
|
|
136
|
+
font-weight: 500;
|
|
137
|
+
border: 1px dotted rgba(255, 255, 255, 0.25);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
pre {
|
|
141
|
+
text-align: left;
|
|
142
|
+
margin-left: 25px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.code span {
|
|
146
|
+
text-wrap: nowrap;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.html-red {
|
|
150
|
+
color: rgba(255, 84, 84, 1);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.html-orange {
|
|
154
|
+
color: rgba(255, 158, 79, 1);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.html-green {
|
|
158
|
+
color: rgba(101, 255, 121, 1);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.w-full {
|
|
162
|
+
width: -webkit-fill-available;
|
|
163
|
+
width: -moz-available;
|
|
164
|
+
width: stretch;
|
|
82
165
|
}
|
|
83
166
|
|
|
84
167
|
@media (prefers-color-scheme: light) {
|