@shival99/z-ui 0.0.1
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 +147 -0
- package/fesm2022/z-ui.mjs +19930 -0
- package/fesm2022/z-ui.mjs.map +1 -0
- package/package.json +113 -0
- package/types/z-ui.d.ts +4978 -0
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Z-UI - Modern Angular Component Library
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@shival99/z-ui)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://angular.dev)
|
|
6
|
+
|
|
7
|
+
A comprehensive, high-performance UI component library built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
- 🎨 **40+ Components** - Buttons, Inputs, Tables, Modals, Calendars, and more
|
|
12
|
+
- 🌙 **Dark Mode** - Built-in theme support with CSS variables
|
|
13
|
+
- ♿ **Accessible** - WCAG 2.1 compliant components
|
|
14
|
+
- 📱 **Responsive** - Mobile-first responsive design
|
|
15
|
+
- 🚀 **High Performance** - OnPush change detection, virtual scrolling
|
|
16
|
+
- 🔧 **Customizable** - CSS variables, class-variance-authority
|
|
17
|
+
- 📦 **Tree-shakable** - Only import what you need
|
|
18
|
+
- 🎯 **Type-safe** - Full TypeScript support with strict mode
|
|
19
|
+
- 🌐 **i18n Ready** - Built-in translation support with ngx-translate
|
|
20
|
+
|
|
21
|
+
## 📦 Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @shival99/z-ui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Peer Dependencies
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm install @angular/cdk @ng-icons/core @ng-icons/lucide @ng-icons/iconsax \
|
|
31
|
+
@tanstack/angular-table @tanstack/angular-virtual \
|
|
32
|
+
class-variance-authority clsx tailwind-merge \
|
|
33
|
+
ngx-mask ngx-scrollbar ngx-sonner ngxtension minisearch
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Optional Dependencies
|
|
37
|
+
|
|
38
|
+
For specific components:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
# For z-editor (Rich Text Editor)
|
|
42
|
+
npm install ngx-quill quill
|
|
43
|
+
|
|
44
|
+
# For z-code (Syntax Highlighting)
|
|
45
|
+
npm install shiki
|
|
46
|
+
|
|
47
|
+
# For z-chart (Charts)
|
|
48
|
+
npm install echarts ngx-echarts
|
|
49
|
+
|
|
50
|
+
# For i18n support
|
|
51
|
+
npm install @ngx-translate/core @ngx-translate/http-loader
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 🚀 Quick Start
|
|
55
|
+
|
|
56
|
+
### 1. Import Components
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import { ZButtonComponent, ZInputComponent, ZTableComponent } from '@shival99/z-ui';
|
|
60
|
+
|
|
61
|
+
@Component({
|
|
62
|
+
selector: 'app-root',
|
|
63
|
+
standalone: true,
|
|
64
|
+
imports: [ZButtonComponent, ZInputComponent, ZTableComponent],
|
|
65
|
+
template: `
|
|
66
|
+
<z-button zVariant="primary">Click me</z-button>
|
|
67
|
+
<z-input zLabel="Email" zPlaceholder="Enter email" />
|
|
68
|
+
`,
|
|
69
|
+
})
|
|
70
|
+
export class AppComponent {}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### 2. Add Theme Styles
|
|
74
|
+
|
|
75
|
+
Add to your `styles.scss`:
|
|
76
|
+
|
|
77
|
+
```scss
|
|
78
|
+
@import '@shival99/z-ui/styles';
|
|
79
|
+
|
|
80
|
+
// Or use CSS variables for custom theming
|
|
81
|
+
:root {
|
|
82
|
+
--z-primary: 222.2 47.4% 11.2%;
|
|
83
|
+
--z-primary-foreground: 210 40% 98%;
|
|
84
|
+
// ... more variables
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 3. Configure Providers
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
// app.config.ts
|
|
92
|
+
import { provideZTranslate } from '@shival99/z-ui';
|
|
93
|
+
|
|
94
|
+
export const appConfig: ApplicationConfig = {
|
|
95
|
+
providers: [
|
|
96
|
+
provideZTranslate({
|
|
97
|
+
defaultLang: 'en',
|
|
98
|
+
langPath: '/assets/i18n/',
|
|
99
|
+
}),
|
|
100
|
+
],
|
|
101
|
+
};
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## 🧩 Components
|
|
105
|
+
|
|
106
|
+
### Form Controls
|
|
107
|
+
|
|
108
|
+
- `ZInputComponent` - Text input with validation, masks, async validation
|
|
109
|
+
- `ZSelectComponent` - Select dropdown with search, multi-select
|
|
110
|
+
- `ZCheckboxComponent` - Checkbox with indeterminate state
|
|
111
|
+
- `ZRadioComponent` - Radio button groups
|
|
112
|
+
- `ZSwitchComponent` - Toggle switch
|
|
113
|
+
- `ZCalendarComponent` - Date/time picker with range support
|
|
114
|
+
|
|
115
|
+
### Data Display
|
|
116
|
+
|
|
117
|
+
- `ZTableComponent` - Advanced data table with sorting, filtering, pagination, virtual scrolling
|
|
118
|
+
- `ZCodeComponent` - Syntax highlighted code blocks
|
|
119
|
+
- `ZBadgeComponent` - Status badges
|
|
120
|
+
|
|
121
|
+
### Layout
|
|
122
|
+
|
|
123
|
+
- `ZModalComponent` - Modal dialogs
|
|
124
|
+
- `ZDrawerComponent` - Side panels
|
|
125
|
+
- `ZAccordionComponent` - Collapsible sections
|
|
126
|
+
- `ZTabsComponent` - Tab navigation
|
|
127
|
+
|
|
128
|
+
### Feedback
|
|
129
|
+
|
|
130
|
+
- `ZToastService` - Toast notifications
|
|
131
|
+
- `ZLoadingComponent` - Loading spinners
|
|
132
|
+
- `ZTooltipDirective` - Tooltips
|
|
133
|
+
- `ZPopoverDirective` - Popovers
|
|
134
|
+
|
|
135
|
+
### Navigation
|
|
136
|
+
|
|
137
|
+
- `ZBreadcrumbComponent` - Breadcrumb navigation
|
|
138
|
+
- `ZMenuComponent` - Dropdown menus
|
|
139
|
+
- `ZPaginationComponent` - Pagination controls
|
|
140
|
+
|
|
141
|
+
## 📚 Documentation
|
|
142
|
+
|
|
143
|
+
Full documentation and examples: [https://z-ui.dev](https://z-ui.dev)
|
|
144
|
+
|
|
145
|
+
## 📄 License
|
|
146
|
+
|
|
147
|
+
MIT © [VuBoi](https://github.com/vuboi)
|