@resolve-components/theme 1.2.4 → 1.2.6
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
CHANGED
|
@@ -1,7 +1,172 @@
|
|
|
1
1
|
# resolve-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Fully customizable Angular UI component library** – 40+ standalone, fully typed, OnPush components with a comprehensive theming system.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- 🎨 **40+ Components** — buttons, inputs, dialogs, tables, trees, virtual scroll, and more
|
|
6
|
+
- 🎭 **Design Tokens** — flat-map SCSS themes emit CSS custom properties at runtime
|
|
7
|
+
- 🌙 **Dark Mode** — built-in `default` and `dark` themes; create your own
|
|
8
|
+
- ✅ **Standalone** — every component is standalone with OnPush change detection
|
|
9
|
+
- 📦 **Zero Dependencies** — uses only Angular CDK overlay for dialogs
|
|
10
|
+
- 🚀 **ng add Schematic** — automatic setup with a single command
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
[📖 Documentation](https://resolve-components.web.app) | [🎨 Component Library](https://resolve-components.web.app/components) | [📦 npm](https://www.npmjs.com/package/@resolve-components/theme)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### Automatic Setup (Recommended)
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
ng add @resolve-components/theme
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The schematic will:
|
|
25
|
+
|
|
26
|
+
- ✅ Install the package
|
|
27
|
+
- ✅ Configure `angular.json`
|
|
28
|
+
- ✅ Update `app.config.ts`
|
|
29
|
+
- ✅ Add `@resolve-components` entry to styles
|
|
30
|
+
|
|
31
|
+
Then start building! 🎉
|
|
32
|
+
|
|
33
|
+
### Manual Setup
|
|
34
|
+
|
|
35
|
+
#### 1. Install the package & Angular CDK
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @resolve-components/theme @angular/cdk eva-icons
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
#### 2. Configure `angular.json`
|
|
42
|
+
|
|
43
|
+
Add the CDK overlay stylesheet to your build `styles` and register the `styles/` folder as a Sass include path:
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"projects": {
|
|
48
|
+
"<your-project>": {
|
|
49
|
+
"architect": {
|
|
50
|
+
"build": {
|
|
51
|
+
"options": {
|
|
52
|
+
"styles": ["node_modules/@angular/cdk/overlay-prebuilt.css", "node_modules/@resolve-components/theme/styles/resolve-components.scss"],
|
|
53
|
+
"stylePreprocessorOptions": {
|
|
54
|
+
"includePaths": ["node_modules/@resolve-components/theme/styles"]
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
#### 3. Register the theme provider
|
|
65
|
+
|
|
66
|
+
Add `provideRcTheme()` to your application providers in `app.config.ts`:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { provideRcTheme } from '@resolve-components/theme';
|
|
70
|
+
|
|
71
|
+
export const appConfig: ApplicationConfig = {
|
|
72
|
+
providers: [
|
|
73
|
+
provideRcTheme({ name: 'default' }),
|
|
74
|
+
// ...other providers
|
|
75
|
+
],
|
|
76
|
+
};
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### 4. Wrap your root template with `<rc-layout>`
|
|
80
|
+
|
|
81
|
+
The layout component listens to theme changes and applies the correct CSS class to `<body>`:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!-- app.html -->
|
|
85
|
+
<rc-layout>
|
|
86
|
+
<rc-navbar position="fixed">...</rc-navbar>
|
|
87
|
+
<router-outlet />
|
|
88
|
+
</rc-layout>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Import `RcLayout` in your root component:
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { RcLayout } from '@resolve-components/theme';
|
|
95
|
+
|
|
96
|
+
@Component({
|
|
97
|
+
imports: [RcLayout /* , ... */],
|
|
98
|
+
})
|
|
99
|
+
export class AppComponent {}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## What's Included
|
|
105
|
+
|
|
106
|
+
### 40+ Components
|
|
107
|
+
|
|
108
|
+
All standalone, fully typed, with OnPush change detection:
|
|
109
|
+
|
|
110
|
+
- **Layout & Display**: Layout, Navbar, Sidenav, Card, Alert, Badge, Icon
|
|
111
|
+
- **Forms**: Input, Select, Checkbox, Radio, Toggle, Datepicker, File Upload
|
|
112
|
+
- **Content**: Table, Tree, Paginator, Infinite Scroll, Virtual Scroll
|
|
113
|
+
- **Feedback**: Toast, Dialog, Tooltip, Menu
|
|
114
|
+
- **Input Patterns**: Autocomplete, Slider, Tabs, Accordion
|
|
115
|
+
- **Progress**: Spinner, Progress Bar
|
|
116
|
+
- **And more!** → [Browse all components](https://resolve-components.web.app/components)
|
|
117
|
+
|
|
118
|
+
### Design Tokens
|
|
119
|
+
|
|
120
|
+
Flat-map SCSS theming system:
|
|
121
|
+
|
|
122
|
+
- Emit CSS custom properties at runtime
|
|
123
|
+
- Swap themes instantly with a single class change on `<body>`
|
|
124
|
+
- Fully customizable — extend the default theme or create your own
|
|
125
|
+
|
|
126
|
+
### Built-in Themes
|
|
127
|
+
|
|
128
|
+
- **Default** — light mode with professional neutral colors
|
|
129
|
+
- **Dark** — dark mode optimized for low-light environments
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Example Usage
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { RcButtonComponent } from '@resolve-components/theme';
|
|
137
|
+
|
|
138
|
+
@Component({
|
|
139
|
+
selector: 'app-example',
|
|
140
|
+
standalone: true,
|
|
141
|
+
imports: [RcButtonComponent],
|
|
142
|
+
template: `
|
|
143
|
+
<button rcButton variant="filled" status="primary">Click me</button>
|
|
144
|
+
<button rcButton variant="outline">Secondary</button>
|
|
145
|
+
<button rcButton variant="ghost">Ghost</button>
|
|
146
|
+
`,
|
|
147
|
+
})
|
|
148
|
+
export class ExampleComponent {}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Peer Dependencies
|
|
154
|
+
|
|
155
|
+
- `@angular/common` ≥ 17.0.0
|
|
156
|
+
- `@angular/core` ≥ 17.0.0
|
|
157
|
+
- `@angular/forms` ≥ 17.0.0
|
|
158
|
+
- `@angular/cdk` ≥ 17.0.0
|
|
159
|
+
- `@angular/platform-browser` ≥ 17.0.0
|
|
160
|
+
- `rxjs` ≥ 7.4.0
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Resources
|
|
165
|
+
|
|
166
|
+
- 📖 [Full Documentation](https://resolve-components.web.app)
|
|
167
|
+
- 🎨 [Component Showcase](https://resolve-components.web.app/components)
|
|
168
|
+
- 📦 [npm Package](https://www.npmjs.com/package/@resolve-components/theme)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
**Made with ❤️ using Angular, Angular CDK, and SCSS**
|