@ruc-lib/widget 2.0.1 → 2.0.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 +152 -63
- package/esm2020/index.mjs +2 -1
- package/index.d.ts +1 -0
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,88 +1,149 @@
|
|
|
1
1
|
# ruclib-widget
|
|
2
2
|
|
|
3
|
-
This library provides a
|
|
3
|
+
This library provides a highly configurable widget component that allows for the creation of a dynamic, dashboard-like interface. Users can create, customize, and arrange multiple widgets within a container, with support for dragging, resizing, and dynamic content.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Dynamic Creation**: Create any number of widgets, each with its own configuration and content.
|
|
8
|
+
- **Drag & Drop**: Easily rearrange widgets within the host container. Layout changes are emitted to be saved.
|
|
9
|
+
- **Resizing**: Set responsive width and height for each widget. Widgets can also be made resizable by the user.
|
|
10
|
+
- **Custom Content**:
|
|
11
|
+
- Set a title and an optional header icon for each widget.
|
|
12
|
+
- Embed custom components (like charts, graphs, forms, etc.) as widget content.
|
|
13
|
+
- **Interactivity**:
|
|
14
|
+
- Optionally display a close icon to remove a widget from the layout.
|
|
15
|
+
- Disable individual widgets to make them non-interactive.
|
|
16
|
+
- **Styling & Theming**:
|
|
17
|
+
- Set a custom background color for each widget.
|
|
18
|
+
- Apply custom theme classes for a consistent look and feel.
|
|
19
|
+
- Visual feedback is provided when a widget is being dragged.
|
|
20
|
+
- **Layout Persistence**: The component emits an event with the updated widget configuration whenever a widget is moved or resized, allowing the application to save and restore the layout.
|
|
21
|
+
|
|
22
|
+
## Installation Guide
|
|
23
|
+
|
|
24
|
+
### Install the Entire Library
|
|
25
|
+
```bash
|
|
26
|
+
npm install @uxpractice/ruc-lib
|
|
27
|
+
```
|
|
4
28
|
|
|
5
|
-
|
|
29
|
+
### Install Individual Component
|
|
30
|
+
If you only need the Widget component:
|
|
31
|
+
```bash
|
|
32
|
+
npm install @ruc-lib/widget
|
|
33
|
+
```
|
|
6
34
|
|
|
7
|
-
|
|
35
|
+
## Usage
|
|
8
36
|
|
|
9
|
-
|
|
37
|
+
### 1. Import the Module
|
|
38
|
+
In your Angular module file (e.g., `app.module.ts`), import the `RuclibWidgetModule`:
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
// For Complete Library
|
|
42
|
+
import { RuclibWidgetModule } from '@uxpractice/ruc-lib/widget';
|
|
43
|
+
|
|
44
|
+
// For Individual Package
|
|
45
|
+
import { RuclibWidgetModule } from '@ruc-lib/widget';
|
|
46
|
+
|
|
47
|
+
import { AppComponent } from './app.component';
|
|
48
|
+
import { NgModule } from '@angular/core';
|
|
49
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
50
|
+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
51
|
+
|
|
52
|
+
@NgModule({
|
|
53
|
+
declarations: [AppComponent],
|
|
54
|
+
imports: [
|
|
55
|
+
BrowserModule,
|
|
56
|
+
BrowserAnimationsModule,
|
|
57
|
+
RuclibWidgetModule
|
|
58
|
+
],
|
|
59
|
+
providers: [],
|
|
60
|
+
bootstrap: [AppComponent]
|
|
61
|
+
})
|
|
62
|
+
export class AppModule {}
|
|
63
|
+
```
|
|
10
64
|
|
|
11
|
-
|
|
65
|
+
### 2. Use the Component
|
|
66
|
+
In your component's template, use the `<uxp-ruclib-widget>` selector:
|
|
12
67
|
|
|
13
|
-
|
|
68
|
+
```html
|
|
69
|
+
<uxp-ruclib-widget
|
|
70
|
+
[rucInputData]="widgetInput"
|
|
71
|
+
[customTheme]="customTheme"
|
|
72
|
+
(widgetClose)="handleWidgetClose($event)"
|
|
73
|
+
(layoutChanged)="handleLayoutChange($event)">
|
|
74
|
+
></uxp-ruclib-widget>
|
|
75
|
+
```
|
|
14
76
|
|
|
15
|
-
|
|
77
|
+
## API Reference
|
|
16
78
|
|
|
17
|
-
|
|
79
|
+
### Component Inputs
|
|
18
80
|
|
|
19
|
-
|
|
81
|
+
| Input | Type | Description |
|
|
82
|
+
|----------------|-----------------------|--------------------------------------------------|
|
|
83
|
+
| `rucInputData` | `WidgetConfig` | The main configuration object for the widgets. |
|
|
84
|
+
| `customTheme` | `string` | An optional CSS class for custom theming. |
|
|
20
85
|
|
|
21
|
-
|
|
86
|
+
### Component Outputs
|
|
22
87
|
|
|
23
|
-
|
|
88
|
+
| Output | Type | Description |
|
|
89
|
+
|-----------------|--------------------|--------------------------------------------------------------------------|
|
|
90
|
+
| `widgetClose` | `string` | Emitted when a widget's close icon is clicked. Returns the widget's `id`. |
|
|
91
|
+
| `layoutChanged` | `WidgetConfigData[]` | Emitted when a widget is moved or resized. Returns the full widget data array. |
|
|
24
92
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
2. Use the widget selector in your HTML file.
|
|
28
|
-
3. Handle input and output bindings accordingly.
|
|
93
|
+
### `rucInputData` (`WidgetConfig`)
|
|
94
|
+
This object defines the global configuration for the widget container.
|
|
29
95
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
(widgetClose)="passEvent($event)"
|
|
35
|
-
(layoutChanged)="passEvent($event)"
|
|
36
|
-
></uxp-ruclib-widget>
|
|
37
|
-
```
|
|
96
|
+
| Property | Type | Description |
|
|
97
|
+
|--------------|----------------------|--------------------------------------------------|
|
|
98
|
+
| `color` | `string` | A theme color to apply to the widgets. |
|
|
99
|
+
| `widgetData` | `WidgetConfigData[]` | An array of individual widget configuration objects. |
|
|
38
100
|
|
|
39
|
-
|
|
101
|
+
### `widgetData` Item (`WidgetConfigData`)
|
|
102
|
+
This object defines the configuration for each individual widget.
|
|
40
103
|
|
|
41
|
-
|
|
104
|
+
| Property | Type | Description |
|
|
105
|
+
|-----------------|-----------|-------------------------------------------------------------------------------|
|
|
106
|
+
| `id` | `string` | A unique identifier for the widget. |
|
|
107
|
+
| `title` | `string` | The title displayed in the widget's header. |
|
|
108
|
+
| `description` | `string` | A description for the widget, often used for tooltips. |
|
|
109
|
+
| `contentType` | `string` | The type of content to render. Can be `'text'`, `'html'`, or `'component'`. |
|
|
110
|
+
| `contentData` | `any` | The data for the content. Can be a string, HTML, or a component reference. |
|
|
111
|
+
| `top` | `string` | The initial top position of the widget (e.g., `'20px'`). |
|
|
112
|
+
| `left` | `string` | The initial left position of the widget (e.g., `'20px'`). |
|
|
113
|
+
| `width` | `string` | The initial width of the widget (e.g., `'300px'`). |
|
|
114
|
+
| `height` | `string` | The initial height of the widget (e.g., `'200px'`). |
|
|
115
|
+
| `draggable` | `boolean` | If `true`, the widget can be dragged. Default is `true`. |
|
|
116
|
+
| `showCloseIcon` | `boolean` | If `true`, a close icon is displayed in the header. Default is `true`. |
|
|
117
|
+
| `disabled` | `boolean` | If `true`, the widget is non-interactive. Default is `false`. |
|
|
118
|
+
| `headerIcon` | `string` | The name of the Material Icon to display in the header. |
|
|
119
|
+
| `backgroundColor`| `string` | An optional background color for the widget. |
|
|
42
120
|
|
|
43
|
-
|
|
44
|
-
• rucInputData: Data to be passed to the widget.
|
|
45
|
-
• customTheme: Custom styling/theme for the widget.
|
|
121
|
+
## Example Configuration
|
|
46
122
|
|
|
47
|
-
|
|
48
|
-
• widgetClose: Event emitted from the widget on clicking close button of a widget.
|
|
49
|
-
• layoutChanged: Event emitted from the widget on resizing/dragging a widget.
|
|
123
|
+
Here's an example of how to configure the Widget component in your component's TypeScript file.
|
|
50
124
|
|
|
125
|
+
```typescript
|
|
126
|
+
import { Component } from '@angular/core';
|
|
51
127
|
|
|
52
|
-
|
|
128
|
+
// For Complete Library
|
|
129
|
+
import { RuclibWidgetModule, WidgetConfig, WidgetConfigData } from '@uxpractice/ruc-lib/widget';
|
|
53
130
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
color: string = 'primary',
|
|
57
|
-
widgetData: WidgetConfigData[] = [
|
|
58
|
-
{
|
|
59
|
-
id: string = 'default-widget-1',
|
|
60
|
-
title: string = 'Default Widget 1',
|
|
61
|
-
description: string = 'Widget Description'
|
|
62
|
-
contentType: string = 'text',
|
|
63
|
-
contentData: any = 'This is the default content for the first widget. It is draggable and has a close icon.',
|
|
64
|
-
top: string = '20px',
|
|
65
|
-
left: string = '20px',
|
|
66
|
-
width: string = '300px',
|
|
67
|
-
height: string = '200px',
|
|
68
|
-
draggable: boolean = true,
|
|
69
|
-
showCloseIcon: boolean = true,
|
|
70
|
-
disabled: boolean = false,
|
|
71
|
-
headerIcon: string = 'widgets'
|
|
72
|
-
}
|
|
73
|
-
]
|
|
74
|
-
};
|
|
75
|
-
```
|
|
131
|
+
// For Individual package
|
|
132
|
+
import { RuclibWidgetModule, WidgetConfig, WidgetConfigData } from '@ruc-lib/widget';
|
|
76
133
|
|
|
77
|
-
|
|
134
|
+
@Component({
|
|
135
|
+
selector: 'app-root',
|
|
136
|
+
templateUrl: './app.component.html',
|
|
137
|
+
})
|
|
138
|
+
export class AppComponent {
|
|
139
|
+
customTheme = 'ruc-custom-theme';
|
|
78
140
|
|
|
79
|
-
|
|
80
|
-
export const mockDrawerInput = {
|
|
141
|
+
widgetInput: WidgetConfig = {
|
|
81
142
|
color: 'primary',
|
|
82
143
|
widgetData: [
|
|
83
144
|
{
|
|
84
|
-
id: '
|
|
85
|
-
title: '
|
|
145
|
+
id: 'widget-1',
|
|
146
|
+
title: 'Text Widget',
|
|
86
147
|
contentType: 'text',
|
|
87
148
|
contentData: 'This is the default content for the first widget. It is draggable and has a close icon.',
|
|
88
149
|
top: '20px',
|
|
@@ -94,8 +155,8 @@ export const mockDrawerInput = {
|
|
|
94
155
|
headerIcon: 'widgets'
|
|
95
156
|
},
|
|
96
157
|
{
|
|
97
|
-
id: '
|
|
98
|
-
title: '
|
|
158
|
+
id: 'widget-2',
|
|
159
|
+
title: 'HTML Widget',
|
|
99
160
|
contentType: 'html',
|
|
100
161
|
contentData: '<h3>HTML Content</h3><p>This widget contains <strong>HTML</strong> and has a different background color.</p>',
|
|
101
162
|
top: '240px',
|
|
@@ -104,10 +165,38 @@ export const mockDrawerInput = {
|
|
|
104
165
|
height: '200px',
|
|
105
166
|
draggable: true,
|
|
106
167
|
showCloseIcon: true,
|
|
107
|
-
backgroundColor: '#f0f0f0'
|
|
168
|
+
backgroundColor: '#f0f0f0',
|
|
169
|
+
headerIcon: 'code'
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
id: 'widget-3',
|
|
173
|
+
title: 'Disabled Widget',
|
|
174
|
+
contentType: 'text',
|
|
175
|
+
contentData: 'This widget cannot be moved or closed.',
|
|
176
|
+
top: '20px',
|
|
177
|
+
left: '340px',
|
|
178
|
+
width: '300px',
|
|
179
|
+
height: '150px',
|
|
180
|
+
draggable: false,
|
|
181
|
+
showCloseIcon: false,
|
|
182
|
+
disabled: true,
|
|
183
|
+
headerIcon: 'block'
|
|
108
184
|
}
|
|
109
185
|
]
|
|
110
|
-
};
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
handleWidgetClose(widgetId: string) {
|
|
189
|
+
console.log('Widget closed:', widgetId);
|
|
190
|
+
// Logic to remove the widget from the widgetInput.widgetData array
|
|
191
|
+
this.widgetInput.widgetData = this.widgetInput.widgetData.filter(w => w.id !== widgetId);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
handleLayoutChange(widgets: WidgetConfigData[]) {
|
|
195
|
+
console.log('Layout changed:', widgets);
|
|
196
|
+
// Logic to save the new layout configuration
|
|
197
|
+
this.widgetInput.widgetData = widgets;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
111
200
|
```
|
|
112
201
|
|
|
113
202
|
|
package/esm2020/index.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from './lib/ruclib-widget.module';
|
|
2
2
|
export * from './lib/ruclib-widget/ruclib-widget.component';
|
|
3
3
|
export * from './model/default-values';
|
|
4
|
-
|
|
4
|
+
export * from './interface/widget';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDZDQUE2QyxDQUFDO0FBQzVELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi13aWRnZXQubW9kdWxlJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcnVjbGliLXdpZGdldC9ydWNsaWItd2lkZ2V0LmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbW9kZWwvZGVmYXVsdC12YWx1ZXMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZS93aWRnZXQnO1xyXG4iXX0=
|
package/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruc-lib/widget",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@angular/
|
|
7
|
-
"@angular/
|
|
8
|
-
"@angular/material": "^15.0.0 || ^
|
|
6
|
+
"@angular/core": ">=15.0.0 <18.0.0",
|
|
7
|
+
"@angular/common": ">=15.0.0 <18.0.0",
|
|
8
|
+
"@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
|
|
9
|
+
"@angular/animations": ">=15.0.0 <18.0.0"
|
|
9
10
|
},
|
|
10
11
|
"dependencies": {
|
|
11
12
|
"tslib": "^2.3.0"
|