@navservice/web-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/AGENTS.md +14 -0
- package/README.md +36 -0
- package/build/es/favicon.png +0 -0
- package/build/es/index.css +580 -0
- package/build/es/index.d.ts +2 -0
- package/build/es/index.js +421 -0
- package/build/es/my-element.d.ts +13 -0
- package/build/es/rslib-runtime.js +18 -0
- package/build/lib/favicon.png +0 -0
- package/build/lib/index.css +580 -0
- package/build/lib/index.d.ts +2 -0
- package/build/lib/index.js +629 -0
- package/build/lib/my-element.d.ts +13 -0
- package/package.json +24 -0
- package/postcss.config.js +6 -0
- package/public/favicon.png +0 -0
- package/rsbuild.config.ts +13 -0
- package/rslib.config.ts +38 -0
- package/src/env.d.ts +1 -0
- package/src/index.css +10 -0
- package/src/index.html +7 -0
- package/src/index.ts +6 -0
- package/src/my-element.ts +106 -0
- package/tailwind.config.mjs +5 -0
- package/tsconfig.json +25 -0
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@navservice/web-components",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "rslib build",
|
|
8
|
+
"dev": "rsbuild dev --open",
|
|
9
|
+
"preview": "rsbuild preview",
|
|
10
|
+
"lib": "npm run build && npm publish --access public"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@navservice/core": "^1.91.0",
|
|
14
|
+
"lit": "^3.3.2"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@rsbuild/core": "^1.7.1",
|
|
18
|
+
"@rslib/core": "^0.19.2",
|
|
19
|
+
"autoprefixer": "^10.4.23",
|
|
20
|
+
"postcss": "^8.5.6",
|
|
21
|
+
"tailwindcss": "^3.4.19",
|
|
22
|
+
"typescript": "^5.9.3"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
Binary file
|
package/rslib.config.ts
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// rslib.config.ts
|
|
2
|
+
import { defineConfig } from '@rslib/core';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
lib: [
|
|
6
|
+
{
|
|
7
|
+
format: "esm",
|
|
8
|
+
dts: {
|
|
9
|
+
bundle: false
|
|
10
|
+
},
|
|
11
|
+
output: {
|
|
12
|
+
distPath: { root: "./build/es" }
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
format: "umd",
|
|
17
|
+
dts: {
|
|
18
|
+
bundle: false
|
|
19
|
+
},
|
|
20
|
+
output: {
|
|
21
|
+
distPath: { root: "./build/lib" },
|
|
22
|
+
minify: false,
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
|
|
28
|
+
source: {
|
|
29
|
+
decorators: {
|
|
30
|
+
version: '2022-03',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
|
|
34
|
+
output: {
|
|
35
|
+
target: 'web',
|
|
36
|
+
cleanDistPath: true,
|
|
37
|
+
},
|
|
38
|
+
});
|
package/src/env.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="@rsbuild/core/types" />
|
package/src/index.css
ADDED
package/src/index.html
ADDED
package/src/index.ts
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { html, LitElement } from 'lit';
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
export class MyElement extends LitElement {
|
|
5
|
+
@property({ type: Boolean })
|
|
6
|
+
accessor open = false;
|
|
7
|
+
|
|
8
|
+
@property({ type: Boolean })
|
|
9
|
+
accessor setOnEscClose = true;
|
|
10
|
+
|
|
11
|
+
createRenderRoot() {
|
|
12
|
+
return this;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
connectedCallback() {
|
|
16
|
+
super.connectedCallback();
|
|
17
|
+
window.addEventListener('keydown', this.handleKeydown);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
disconnectedCallback() {
|
|
21
|
+
window.removeEventListener('keydown', this.handleKeydown);
|
|
22
|
+
super.disconnectedCallback();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
handleKeydown = (event: KeyboardEvent) => {
|
|
26
|
+
if (this.setOnEscClose && event.key === 'Escape' && this.open) {
|
|
27
|
+
this.closeModal();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
openModal = () => {
|
|
32
|
+
this.open = true;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
closeModal = () => {
|
|
36
|
+
this.open = false;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
clearAndClose = () => {
|
|
40
|
+
console.log('Clear acionado');
|
|
41
|
+
this.open = false;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
render() {
|
|
45
|
+
return html`
|
|
46
|
+
<div class="min-h-screen flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-gray-50 to-gray-100">
|
|
47
|
+
<h1 class="text-3xl font-semibold tracking-tight text-gray-900">
|
|
48
|
+
Rsbuild + Lit
|
|
49
|
+
</h1>
|
|
50
|
+
<p class="text-sm text-gray-500">
|
|
51
|
+
Interface minimalista, rápida e moderna.
|
|
52
|
+
</p>
|
|
53
|
+
|
|
54
|
+
<button
|
|
55
|
+
class="mt-4 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
56
|
+
@click=${this.openModal}
|
|
57
|
+
>
|
|
58
|
+
Abrir modal lateral
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<!-- Overlay -->
|
|
63
|
+
<div
|
|
64
|
+
class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300
|
|
65
|
+
${this.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
|
|
66
|
+
@click=${this.closeModal}
|
|
67
|
+
></div>
|
|
68
|
+
|
|
69
|
+
<!-- Drawer -->
|
|
70
|
+
<aside
|
|
71
|
+
class="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-2xl
|
|
72
|
+
transition-transform duration-300 ease-out
|
|
73
|
+
${this.open ? 'translate-x-0' : 'translate-x-full'}"
|
|
74
|
+
>
|
|
75
|
+
<div class="flex h-full flex-col p-6">
|
|
76
|
+
<div class="mb-4">
|
|
77
|
+
<h2 class="text-lg font-semibold text-gray-900">
|
|
78
|
+
Confirmação
|
|
79
|
+
</h2>
|
|
80
|
+
<p class="mt-1 text-sm text-gray-500">
|
|
81
|
+
Este é um modal lateral com UX inspirada em Vercel e Cloudflare.
|
|
82
|
+
</p>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="flex-1"></div>
|
|
86
|
+
|
|
87
|
+
<div class="flex justify-end gap-3 border-t pt-4">
|
|
88
|
+
<button
|
|
89
|
+
class="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition"
|
|
90
|
+
@click=${this.clearAndClose}
|
|
91
|
+
>
|
|
92
|
+
Cancelar
|
|
93
|
+
</button>
|
|
94
|
+
|
|
95
|
+
<button
|
|
96
|
+
class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 transition"
|
|
97
|
+
@click=${this.closeModal}
|
|
98
|
+
>
|
|
99
|
+
Confirmar
|
|
100
|
+
</button>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</aside>
|
|
104
|
+
`;
|
|
105
|
+
}
|
|
106
|
+
}
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": ["DOM", "ES2020"],
|
|
4
|
+
"target": "ES2020",
|
|
5
|
+
"noEmit": true,
|
|
6
|
+
"skipLibCheck": true,
|
|
7
|
+
"experimentalDecorators": true,
|
|
8
|
+
"useDefineForClassFields": true,
|
|
9
|
+
|
|
10
|
+
/* modules */
|
|
11
|
+
"module": "ESNext",
|
|
12
|
+
"moduleDetection": "force",
|
|
13
|
+
"moduleResolution": "bundler",
|
|
14
|
+
"verbatimModuleSyntax": true,
|
|
15
|
+
"resolveJsonModule": true,
|
|
16
|
+
"allowImportingTsExtensions": true,
|
|
17
|
+
"noUncheckedSideEffectImports": true,
|
|
18
|
+
|
|
19
|
+
/* type checking */
|
|
20
|
+
"strict": true,
|
|
21
|
+
"noUnusedLocals": true,
|
|
22
|
+
"noUnusedParameters": true
|
|
23
|
+
},
|
|
24
|
+
"include": ["src"]
|
|
25
|
+
}
|