@lazhus/kg-ui 0.3.0 → 0.4.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/README.md +30 -24
- package/custom-elements.json +691 -53
- package/dist/components/kg-avatar.js +137 -0
- package/dist/components/kg-breadcrumbs.js +130 -0
- package/dist/components/kg-list.js +90 -0
- package/dist/components/kg-tag.js +121 -0
- package/dist/components/kg-tooltip.js +131 -0
- package/dist/components/kg-tree.js +121 -0
- package/dist/index.js +26 -11
- package/dist/kg-ui.css +1 -1
- package/package.json +4 -1
- package/types/components/kg-avatar.d.ts +28 -0
- package/types/components/kg-breadcrumbs.d.ts +25 -0
- package/types/components/kg-list.d.ts +20 -0
- package/types/components/kg-tag.d.ts +25 -0
- package/types/components/kg-tooltip.d.ts +28 -0
- package/types/components/kg-tree.d.ts +28 -0
- package/types/index.d.ts +62 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Modern, lightweight UI component library built with LitElement.
|
|
|
4
4
|
|
|
5
5
|
## 🚀 Features
|
|
6
6
|
|
|
7
|
-
- ✨ **
|
|
7
|
+
- ✨ **40+ Modern Components** - Tree, List, DataGrid, Modal, Avatar, 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
|
|
@@ -52,10 +52,7 @@ import '@lazhus/kg-ui/style.css';
|
|
|
52
52
|
```html
|
|
53
53
|
<kg-button color="primary">Click Me</kg-button>
|
|
54
54
|
<kg-input label="Username" placeholder="Enter your name"></kg-input>
|
|
55
|
-
<kg-
|
|
56
|
-
<span slot="header">Card Title</span>
|
|
57
|
-
<p>Card content goes here</p>
|
|
58
|
-
</kg-card>
|
|
55
|
+
<kg-avatar name="John Doe" color="secondary"></kg-avatar>
|
|
59
56
|
```
|
|
60
57
|
|
|
61
58
|
## 🛠 Programmatic Access
|
|
@@ -109,36 +106,45 @@ document.documentElement.setAttribute('data-theme', 'dark');
|
|
|
109
106
|
|
|
110
107
|
## 📚 Components
|
|
111
108
|
|
|
112
|
-
###
|
|
109
|
+
### Foundation & General
|
|
113
110
|
- `kg-button` - Customizable button
|
|
114
|
-
- `kg-
|
|
115
|
-
- `kg-textarea` - Multi-line text input
|
|
116
|
-
- `kg-select` - Dropdown select
|
|
117
|
-
- `kg-checkbox` - Checkbox input
|
|
118
|
-
- `kg-radio` - Radio button
|
|
119
|
-
- `kg-switch` - Toggle switch
|
|
120
|
-
- `kg-slider` - Range slider
|
|
121
|
-
- `kg-file-upload` - File upload
|
|
122
|
-
- `kg-datepicker` - Date picker
|
|
123
|
-
- `kg-colorpicker` - Color picker
|
|
124
|
-
|
|
125
|
-
### Layout & Data
|
|
111
|
+
- `kg-text` - Typography system
|
|
126
112
|
- `kg-card` - Content card
|
|
127
|
-
- `kg-
|
|
128
|
-
- `kg-
|
|
113
|
+
- `kg-avatar` - Profile image/initials
|
|
114
|
+
- `kg-tag` - Label/Badge
|
|
129
115
|
- `kg-divider` - Visual separator
|
|
130
|
-
- `kg-
|
|
116
|
+
- `kg-image` - Lazy loading image
|
|
117
|
+
|
|
118
|
+
### Navigation
|
|
119
|
+
- `kg-breadcrumbs` - Hierarchical crumbs
|
|
131
120
|
- `kg-tabs` - Tabbed interface
|
|
132
121
|
- `kg-stepper` - Step indicator
|
|
133
122
|
|
|
134
|
-
###
|
|
123
|
+
### Form Components
|
|
124
|
+
- `kg-input`, `kg-textarea`, `kg-select`
|
|
125
|
+
- `kg-checkbox`, `kg-radio`, `kg-switch`
|
|
126
|
+
- `kg-slider`, `kg-datepicker`, `kg-colorpicker`
|
|
127
|
+
- `kg-file-upload`
|
|
128
|
+
|
|
129
|
+
### Layout & Structure
|
|
130
|
+
- `kg-grid` / `kg-row` / `kg-column` - Grid system
|
|
131
|
+
- `kg-accordion` - Collapsible sections
|
|
135
132
|
- `kg-modal` - Modal dialog
|
|
136
133
|
- `kg-drawer` - Side panel
|
|
134
|
+
|
|
135
|
+
### Feedback & Overlays
|
|
137
136
|
- `kg-toast` - Programmatic notification
|
|
138
|
-
- `kg-
|
|
139
|
-
- `kg-
|
|
137
|
+
- `kg-tooltip` - Contextual info balon
|
|
138
|
+
- `kg-loader` - Full-screen overlay
|
|
139
|
+
- `kg-spinner` - Loading indicator
|
|
140
|
+
- `kg-progress` - Progress bar
|
|
140
141
|
- `kg-skeleton` - Loading placeholder
|
|
141
142
|
|
|
143
|
+
### Data
|
|
144
|
+
- `kg-tree` - Hierarchical tree structure
|
|
145
|
+
- `kg-list` - Structured list rows
|
|
146
|
+
- `kg-datagrid` - Powerful data table
|
|
147
|
+
|
|
142
148
|
## 📄 License
|
|
143
149
|
|
|
144
150
|
MIT © Kolay Gelsin FE Team
|