@lazhus/kg-ui 0.2.2 → 0.3.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/README.md +49 -33
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -4,41 +4,47 @@ Modern, lightweight UI component library built with LitElement.
|
|
|
4
4
|
|
|
5
5
|
## 🚀 Features
|
|
6
6
|
|
|
7
|
-
- ✨ **
|
|
7
|
+
- ✨ **30+ Modern Components** - Button, Input, Modal, Drawer, DataGrid, and more
|
|
8
8
|
- 🎨 **Customizable Theming** - CSS variables for easy customization
|
|
9
9
|
- 🌓 **Dark Mode Support** - Built-in dark theme
|
|
10
10
|
- 📱 **Responsive** - Mobile-first design
|
|
11
11
|
- ⚡ **Lightweight** - Built with LitElement
|
|
12
|
-
- 🎯 **TypeScript Ready** - Full type support
|
|
12
|
+
- 🎯 **TypeScript Ready** - Full type support (Global & React/JSX)
|
|
13
13
|
- ♿ **Accessible** - ARIA compliant components
|
|
14
14
|
|
|
15
15
|
## 📦 Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install @
|
|
18
|
+
npm install @lazhus/kg-ui
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## 🎯 Quick Start
|
|
22
22
|
|
|
23
23
|
### 1. Import Components
|
|
24
24
|
|
|
25
|
+
You can import components individually or as a whole:
|
|
26
|
+
|
|
25
27
|
```javascript
|
|
26
|
-
// Import
|
|
27
|
-
import '@kg
|
|
28
|
-
import '@kg
|
|
29
|
-
|
|
28
|
+
// Import specific components
|
|
29
|
+
import '@lazhus/kg-ui/components/kg-button.js';
|
|
30
|
+
import '@lazhus/kg-ui/components/kg-input.js';
|
|
31
|
+
|
|
32
|
+
// OR import everything
|
|
33
|
+
import { kgbutton, kgloader, toast } from '@lazhus/kg-ui';
|
|
30
34
|
```
|
|
31
35
|
|
|
32
36
|
### 2. Import Styles
|
|
33
37
|
|
|
38
|
+
Add the CSS to your project:
|
|
39
|
+
|
|
34
40
|
```html
|
|
35
|
-
<link rel="stylesheet" href="node_modules/@kg
|
|
41
|
+
<link rel="stylesheet" href="node_modules/@lazhus/kg-ui/dist/kg-ui.css">
|
|
36
42
|
```
|
|
37
43
|
|
|
38
|
-
Or in your JavaScript:
|
|
44
|
+
Or in your JavaScript/CSS:
|
|
39
45
|
|
|
40
46
|
```javascript
|
|
41
|
-
import '@kg
|
|
47
|
+
import '@lazhus/kg-ui/style.css';
|
|
42
48
|
```
|
|
43
49
|
|
|
44
50
|
### 3. Use in HTML
|
|
@@ -52,6 +58,32 @@ import '@kg/ui/styles';
|
|
|
52
58
|
</kg-card>
|
|
53
59
|
```
|
|
54
60
|
|
|
61
|
+
## 🛠 Programmatic Access
|
|
62
|
+
|
|
63
|
+
Some components can be called via JavaScript for ease of use:
|
|
64
|
+
|
|
65
|
+
### Toast Notifications
|
|
66
|
+
```javascript
|
|
67
|
+
import { toast } from '@lazhus/kg-ui';
|
|
68
|
+
|
|
69
|
+
toast.success('Başarılı', 'İşlem başarıyla tamamlandı.');
|
|
70
|
+
toast.error('Hata', 'Bir sorun oluştu.');
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Loader Screen
|
|
74
|
+
```javascript
|
|
75
|
+
import { loader } from '@lazhus/kg-ui';
|
|
76
|
+
|
|
77
|
+
// Show loader
|
|
78
|
+
loader.show({
|
|
79
|
+
text: 'Yükleniyor...',
|
|
80
|
+
glass: true
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
// Hide loader
|
|
84
|
+
setTimeout(() => loader.hide(), 3000);
|
|
85
|
+
```
|
|
86
|
+
|
|
55
87
|
## 🎨 Theming
|
|
56
88
|
|
|
57
89
|
KG UI uses CSS variables for easy theming:
|
|
@@ -90,39 +122,23 @@ document.documentElement.setAttribute('data-theme', 'dark');
|
|
|
90
122
|
- `kg-datepicker` - Date picker
|
|
91
123
|
- `kg-colorpicker` - Color picker
|
|
92
124
|
|
|
93
|
-
### Layout
|
|
125
|
+
### Layout & Data
|
|
94
126
|
- `kg-card` - Content card
|
|
95
127
|
- `kg-grid` - Responsive grid system
|
|
128
|
+
- `kg-datagrid` - Powerful data table with sorting/filtering
|
|
96
129
|
- `kg-divider` - Visual separator
|
|
97
130
|
- `kg-accordion` - Collapsible sections
|
|
98
131
|
- `kg-tabs` - Tabbed interface
|
|
99
132
|
- `kg-stepper` - Step indicator
|
|
100
133
|
|
|
101
|
-
### Overlay
|
|
134
|
+
### Overlay & Feedback
|
|
102
135
|
- `kg-modal` - Modal dialog
|
|
103
136
|
- `kg-drawer` - Side panel
|
|
104
|
-
- `kg-toast` -
|
|
105
|
-
|
|
106
|
-
|
|
137
|
+
- `kg-toast` - Programmatic notification
|
|
138
|
+
- `kg-loader` - Full-screen loading overlay
|
|
139
|
+
- `kg-spinner` - Inline loading indicator
|
|
107
140
|
- `kg-skeleton` - Loading placeholder
|
|
108
141
|
|
|
109
|
-
### Typography
|
|
110
|
-
- `kg-text` - Text component with variants
|
|
111
|
-
|
|
112
|
-
## 📖 Documentation
|
|
113
|
-
|
|
114
|
-
Visit our [documentation site](https://your-docs-url.com) for detailed component APIs and examples.
|
|
115
|
-
|
|
116
|
-
## 🤝 Contributing
|
|
117
|
-
|
|
118
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
119
|
-
|
|
120
142
|
## 📄 License
|
|
121
143
|
|
|
122
|
-
MIT ©
|
|
123
|
-
|
|
124
|
-
## 🔗 Links
|
|
125
|
-
|
|
126
|
-
- [Documentation](https://your-docs-url.com)
|
|
127
|
-
- [GitHub](https://github.com/yourusername/kg-ui)
|
|
128
|
-
- [npm](https://www.npmjs.com/package/@kg/ui)
|
|
144
|
+
MIT © Kolay Gelsin FE Team
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lazhus/kg-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -29,7 +29,11 @@
|
|
|
29
29
|
"types": "node generate-types.js",
|
|
30
30
|
"preview": "vite preview",
|
|
31
31
|
"prepublishOnly": "npm run build",
|
|
32
|
-
"upload": "npm run build && npm publish --access public"
|
|
32
|
+
"upload": "npm run build && npm publish --access public",
|
|
33
|
+
"release:patch": "npm version patch && npm run release",
|
|
34
|
+
"release:minor": "npm version minor && npm run release",
|
|
35
|
+
"release:major": "npm version major && npm run release",
|
|
36
|
+
"release": "node publish.js"
|
|
33
37
|
},
|
|
34
38
|
"keywords": [
|
|
35
39
|
"ui",
|
|
@@ -54,4 +58,4 @@
|
|
|
54
58
|
"lit": "^3.0.0"
|
|
55
59
|
},
|
|
56
60
|
"customElements": "custom-elements.json"
|
|
57
|
-
}
|
|
61
|
+
}
|