@lovince/my-lit-library 1.0.1 → 1.0.3
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/README.md +111 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# @lovince/my-lit-library
|
|
2
|
+
|
|
3
|
+
Reusable Web Components built with Lit
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @lovince/my-lit-library
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Button Component
|
|
14
|
+
|
|
15
|
+
The library includes a customizable button component with multiple variants.
|
|
16
|
+
|
|
17
|
+
#### Import and Register
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { Button, defineButton } from '@lovince/my-lit-library';
|
|
21
|
+
|
|
22
|
+
// Register the component
|
|
23
|
+
defineButton();
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
#### HTML Usage
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<!-- Default button -->
|
|
30
|
+
<my-button>Click me</my-button>
|
|
31
|
+
|
|
32
|
+
<!-- With variants -->
|
|
33
|
+
<my-button variant="primary">Primary</my-button>
|
|
34
|
+
<my-button variant="secondary">Secondary</my-button>
|
|
35
|
+
<my-button variant="danger">Danger</my-button>
|
|
36
|
+
<my-button variant="success">Success</my-button>
|
|
37
|
+
<my-button variant="outline">Outline</my-button>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
#### TypeScript Usage
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { Button, ButtonVariant } from '@lovince/my-lit-library';
|
|
44
|
+
|
|
45
|
+
// You can also use the type directly
|
|
46
|
+
const variant: ButtonVariant = 'primary';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Button Variants
|
|
50
|
+
|
|
51
|
+
- **primary**: Blue background button (default)
|
|
52
|
+
- **secondary**: Gray background button
|
|
53
|
+
- **danger**: Red background button
|
|
54
|
+
- **success**: Green background button
|
|
55
|
+
- **outline**: Transparent with blue border
|
|
56
|
+
|
|
57
|
+
## API Reference
|
|
58
|
+
|
|
59
|
+
### Button Properties
|
|
60
|
+
|
|
61
|
+
| Property | Type | Default | Description |
|
|
62
|
+
|----------|------|---------|-------------|
|
|
63
|
+
| `variant` | `ButtonVariant` | `'primary'` | The visual style variant of the button |
|
|
64
|
+
|
|
65
|
+
### ButtonVariant Type
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'outline';
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Development
|
|
72
|
+
|
|
73
|
+
### Building
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
npm run build
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Publishing
|
|
80
|
+
|
|
81
|
+
The library follows semantic versioning:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
# Bug fix
|
|
85
|
+
npm version patch
|
|
86
|
+
npm publish --access public
|
|
87
|
+
|
|
88
|
+
# New feature
|
|
89
|
+
npm version minor
|
|
90
|
+
npm publish --access public
|
|
91
|
+
|
|
92
|
+
# Breaking change
|
|
93
|
+
npm version major
|
|
94
|
+
npm publish --access public
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Browser Support
|
|
98
|
+
|
|
99
|
+
This library supports all modern browsers that support [Web Components](https://caniuse.com/web-components) and [ES2022](https://caniuse.com/es2022).
|
|
100
|
+
|
|
101
|
+
## Dependencies
|
|
102
|
+
|
|
103
|
+
- **Lit**: ^3.0.0 (peer dependency)
|
|
104
|
+
|
|
105
|
+
## License
|
|
106
|
+
|
|
107
|
+
MIT
|
|
108
|
+
|
|
109
|
+
## Versions
|
|
110
|
+
|
|
111
|
+
See [npm versions](https://www.npmjs.com/package/@lovince/my-lit-library?activeTab=versions) for the complete version history.
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lovince/my-lit-library",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Reusable Web Components built with Lit",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
|
-
"dist"
|
|
7
|
+
"dist",
|
|
8
|
+
"README.md"
|
|
8
9
|
],
|
|
9
10
|
"main": "./dist/index.js",
|
|
10
11
|
"module": "./dist/index.js",
|