@trenoxxious/n-components 1.0.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/index.html +35 -0
- package/package.json +28 -0
- package/public/vite.svg +1 -0
- package/src/assets/lit.svg +1 -0
- package/src/components/n-button.ts +106 -0
- package/src/index.css +105 -0
- package/src/index.ts +1 -0
- package/tsconfig.json +27 -0
package/index.html
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>n-components</title>
|
|
9
|
+
<link rel="stylesheet" href="./src/index.css" />
|
|
10
|
+
<script type="module" src="/src/index.ts"></script>
|
|
11
|
+
</head>
|
|
12
|
+
|
|
13
|
+
<body>
|
|
14
|
+
<header>
|
|
15
|
+
<h1>
|
|
16
|
+
n-components
|
|
17
|
+
</h1>
|
|
18
|
+
<p>Light-weight web components for use with vanilla HTML, JS and CSS.</p>
|
|
19
|
+
</header>
|
|
20
|
+
<p class="sec">You want some buttons? We have some cool buttons.</p>
|
|
21
|
+
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
|
|
22
|
+
<div class="display-sec">
|
|
23
|
+
<div>
|
|
24
|
+
Base Buttons:
|
|
25
|
+
</div>
|
|
26
|
+
<div class="display-row">
|
|
27
|
+
<n-button variant="primary">Primary</n-button>
|
|
28
|
+
<n-button variant="secondary">Secondary</n-button>
|
|
29
|
+
<n-button variant="warning">Warning</n-button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</body>
|
|
34
|
+
|
|
35
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@trenoxxious/n-components",
|
|
3
|
+
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
|
+
"private": false,
|
|
5
|
+
"version": "1.0.0",
|
|
6
|
+
"repository": "github:Trenoxxious/n-components",
|
|
7
|
+
"keywords": ["web-components", "lit-element"],
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./src/index.ts",
|
|
11
|
+
"./n-button": "./src/components/n-button.ts"
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite",
|
|
15
|
+
"build": "tsc && vite build",
|
|
16
|
+
"preview": "vite preview"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"lit": "^3.3.1"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"typescript": "~5.9.3",
|
|
23
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
24
|
+
},
|
|
25
|
+
"overrides": {
|
|
26
|
+
"vite": "npm:rolldown-vite@7.2.5"
|
|
27
|
+
}
|
|
28
|
+
}
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { LitElement, css, html } from 'lit';
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('n-button')
|
|
5
|
+
export class NButton extends LitElement {
|
|
6
|
+
static properties = {
|
|
7
|
+
variant: { type: String },
|
|
8
|
+
animation: { type: String },
|
|
9
|
+
thin: { type: Boolean },
|
|
10
|
+
thick: { type: Boolean },
|
|
11
|
+
outlineOnly: { type: Boolean },
|
|
12
|
+
scaleHover: { type: Boolean },
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
variant: 'primary' | 'secondary' | 'warning' = 'primary';
|
|
16
|
+
thin = false;
|
|
17
|
+
thick = false;
|
|
18
|
+
outlineOnly = false;
|
|
19
|
+
scaleHover = false;
|
|
20
|
+
animation: 'fast' | 'normal' | 'slow' | 'extra-slow' = 'normal';
|
|
21
|
+
|
|
22
|
+
static styles = css`
|
|
23
|
+
button {
|
|
24
|
+
padding: 8px 16px;
|
|
25
|
+
border: none;
|
|
26
|
+
border-radius: 4px;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
transition: all;
|
|
31
|
+
animation-duration: 0.3s;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
button.primary {
|
|
35
|
+
background-color: #007bff;
|
|
36
|
+
color: white;
|
|
37
|
+
border: 1px solid #2c92ffff;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
button.primary:hover {
|
|
41
|
+
background-color: #0056b3;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
button.secondary {
|
|
45
|
+
background-color: #f0f0f0;
|
|
46
|
+
color: #333;
|
|
47
|
+
border: 1px solid #ddd;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
button.secondary:hover {
|
|
51
|
+
background-color: #e0e0e0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
button.warning {
|
|
55
|
+
background-color: rgba(233, 100, 23, 1);
|
|
56
|
+
color: white;
|
|
57
|
+
border: 1px solid rgba(248, 142, 42, 1);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
button.warning:hover {
|
|
61
|
+
background-color: rgba(248, 177, 44, 1);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
button.thin {
|
|
65
|
+
padding: 4px 8px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
button.thick {
|
|
69
|
+
padding: 12px 24px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
button.outline-only {
|
|
73
|
+
background-color: transparent !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
button.scale-hover:hover {
|
|
77
|
+
transform: scale(1.05);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.animation-fast {
|
|
81
|
+
transition: all 0.10s;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.animation-normal {
|
|
85
|
+
transition: all 0.25s;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.animation-slow {
|
|
89
|
+
transition: all 0.45s;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.animation-extra-slow {
|
|
93
|
+
transition: all 1s;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media screen and (width <= 1024px) {
|
|
97
|
+
button {
|
|
98
|
+
font-size: 12px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
|
|
103
|
+
render() {
|
|
104
|
+
return html`<button class="${this.variant}${this.thin && !this.thick ? ' thin' : this.thick ? ' thick' : ''}${this.outlineOnly ? ' outline-only' : ''}${this.scaleHover ? ' scale-hover' : ''} animation-${this.animation}"><slot></slot></button>`;
|
|
105
|
+
}
|
|
106
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
|
|
2
|
+
@import url('https://fonts.googleapis.com/css2?family=Manjari:wght@100;400;700&display=swap');
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
font-family: "Cal Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
6
|
+
line-height: 1.5;
|
|
7
|
+
font-weight: 300;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
color-scheme: light dark;
|
|
10
|
+
color: rgba(255, 255, 255, 0.87);
|
|
11
|
+
background: linear-gradient(to top, #182633, #242424);
|
|
12
|
+
font-synthesis: none;
|
|
13
|
+
text-rendering: optimizeLegibility;
|
|
14
|
+
-webkit-font-smoothing: antialiased;
|
|
15
|
+
-moz-osx-font-smoothing: grayscale;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
* {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
text-align: center;
|
|
22
|
+
text-wrap: pretty;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
margin: 0;
|
|
27
|
+
min-width: 320px;
|
|
28
|
+
min-height: 100vh;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
header {
|
|
32
|
+
position: relative;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
background-clip: text;
|
|
38
|
+
margin-left: 5%;
|
|
39
|
+
margin-right: 5%;
|
|
40
|
+
margin-bottom: 50px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
header h1 {
|
|
44
|
+
position: relative;
|
|
45
|
+
background-clip: text;
|
|
46
|
+
background-image: linear-gradient(2deg, rgb(255, 255, 255) 40%, transparent 40.5%);
|
|
47
|
+
-webkit-background-clip: text;
|
|
48
|
+
color: transparent;
|
|
49
|
+
font-size: 9rem;
|
|
50
|
+
-webkit-text-stroke-color: rgb(255, 255, 255);
|
|
51
|
+
-webkit-text-stroke-width: 2px;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-wrap: nowrap;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
header p {
|
|
57
|
+
text-align: center;
|
|
58
|
+
text-wrap: pretty;
|
|
59
|
+
font-size: 1.8rem;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.sec {
|
|
63
|
+
margin-top: 15px;
|
|
64
|
+
margin-bottom: 15px;
|
|
65
|
+
font-size: 1.5rem;
|
|
66
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
67
|
+
font-weight: 400;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.display-sec {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
flex-direction: row;
|
|
75
|
+
gap: 10px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.display-row {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: row;
|
|
81
|
+
gap: 5px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@media (prefers-color-scheme: light) {
|
|
85
|
+
:root {
|
|
86
|
+
color: #213547;
|
|
87
|
+
background-color: #ffffff;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@media screen and (width < 1050px) {
|
|
92
|
+
header h1 {
|
|
93
|
+
font-size: 3rem;
|
|
94
|
+
-webkit-text-stroke-width: 1px;
|
|
95
|
+
background-image: linear-gradient(2deg, rgb(255, 255, 255) 39%, transparent 39.5%);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
header p {
|
|
99
|
+
font-size: 1rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.sec {
|
|
103
|
+
font-size: 1.25rem;
|
|
104
|
+
}
|
|
105
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { NButton } from './components/n-button.js';
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"experimentalDecorators": true,
|
|
5
|
+
"useDefineForClassFields": false,
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
8
|
+
"types": ["vite/client"],
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
|
|
11
|
+
/* Bundler mode */
|
|
12
|
+
"moduleResolution": "bundler",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"verbatimModuleSyntax": true,
|
|
15
|
+
"moduleDetection": "force",
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"erasableSyntaxOnly": true,
|
|
23
|
+
"noFallthroughCasesInSwitch": true,
|
|
24
|
+
"noUncheckedSideEffectImports": true
|
|
25
|
+
},
|
|
26
|
+
"include": ["src"]
|
|
27
|
+
}
|