@ruc-lib/virtual-scroll 2.0.0 → 2.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.
Files changed (4) hide show
  1. package/README.md +111 -91
  2. package/esm2020/model/ruclib-virtual-scroll.model.mjs +1 -1
  3. package/model/ruclib-virtual-scroll.model.d.ts +30 -0
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -2,108 +2,128 @@
2
2
 
3
3
  Virtual scroll, often referred to as "virtualized lists" or "windowing," is a technique used to efficiently display large, scrollable lists of items in a user interface.
4
4
 
5
- # Features
6
- - Horizontal and Vertical Scrolling: It supports virtual scrolling in both horizontal and vertical directions.
7
- - Loading Strategies:
8
- - Can be used with data that is already loaded.
9
- - Supports lazy loading of data as the user scrolls.
10
- - Can handle delayed loading of data.
11
- - Responsiveness: It can adapt to window resizing for both horizontal and vertical virtual scrolls.
12
- - Integration with Various UI Elements: The virtual scroll functionality can be applied to a wide range of UI components, including:
13
- - Tables and Data Grids (especially when many rows are added)
14
- - Data Lists or Data Views
15
- - Steps/Steppers
16
- - virtual scrolls
17
- - Textareas
18
- - Multiselect input fields
19
- - Charts
20
- - Trees and Tree Tables
21
- - Accordions
22
- - Dialogs
23
- - Popovers
24
- - Mega Menus, Panel Menus, and Tiered Menus
25
- - Dropdowns
26
- - Input Autocomplete fields
27
- - Dynamic Content: It can handle virtual scrolling when new items are added to the list.
28
- - Programmatic Scrolling: It offers an action to move the scroller from the bottom to the top.
29
-
30
5
  # Installation guide
31
6
 
32
- # Install complete library
33
-
34
- `npm install @uxpractice/ruc-lib`
35
-
36
- # Install individual component
37
-
38
- If users only need the virtual scroll component, they can install it separately
39
- `npm install @ruc-lib/virtual-scroll`
40
-
41
- # Usage
7
+ To use the Virtual Scroll component, you can install the entire RUC library or just this specific component.
42
8
 
43
- # import required modules
44
-
45
- for library
46
- `import { RuclibVirtualScrollModule } from '@uxpractice/ruc-lib/virtual-scroll'`
47
-
48
- for seperate package
49
- `import { RuclibVirtualScrollModule } from '@ruc-lib/virtual-scroll'`
50
-
51
- # use component selector
52
-
53
- ```
54
- <uxp-ruclib-virtual-scroll [rucInputData]="virtualScrollRucInputData" [customTheme]="customTheme"><!-- Put your component here --></uxp-ruclib-virtual-scroll>
9
+ ### Install the Entire Library
10
+ ```bash
11
+ npm install @uxpractice/ruc-lib
55
12
  ```
56
13
 
57
- # Input and Output
14
+ ### Install Individual Component
58
15
 
59
- # Inputs
60
- rucInputData -> It is the configuration input to configure the virtual scroll
61
-
62
- customTheme -> It is the name of the theme.
63
-
64
- # Output
65
-
66
- User can see the UI with virtual scroll data
67
-
68
- # rucInputData (sample object)
69
-
70
- ## rucInputData configurations options-
16
+ If you only need the Virtual Scroll component
17
+ ```bash
18
+ npm install @ruc-lib/virtual-scroll
19
+ ```
71
20
 
72
- ```
73
- RucVirtualScrollInput {
74
- itemSize?: number;
75
- viewportWidth?: string;
76
- viewportHeight?: string;
77
- backToTopIcon?: string;
78
- backToTopLabel?: string;
79
- iconColor?: string;
80
- isBackToTopIcon?: boolean;
81
- isLoad?: boolean;
82
- thumbColor?: string;
83
- trackColor?: string;
84
- }
21
+ ## Usage
22
+ ### 1. Import the Module
23
+ In your Angular module file (e.g., `app.module.ts`), import the `RuclibVirtualScrollModule`:
24
+
25
+ ```typescript
26
+ // For Complete Library
27
+ import { RuclibVirtualScrollModule } from '@uxpractice/ruc-lib/virtual-scroll';
28
+
29
+ // For Individual Package
30
+ import { RuclibVirtualScrollModule } from '@ruc-lib/virtual-scroll';
31
+
32
+ import { AppComponent } from './app.component';
33
+ import { NgModule } from '@angular/core';
34
+ import { BrowserModule } from '@angular/platform-browser';
35
+
36
+ @NgModule({
37
+ declarations: [AppComponent],
38
+ imports: [
39
+ BrowserModule,
40
+ RuclibVirtualScrollModule
41
+ ],
42
+ providers: [],
43
+ bootstrap: [AppComponent]
44
+ })
45
+ export class AppModule {}
46
+ ```
85
47
 
86
- ```
48
+ ### 2. Use the Component
49
+ In your component's template, use the `<uxp-ruclib-virtual-scroll>` selector and pass the configuration object to the `rucInputData` input and the data array to the `dataSource` input.
87
50
 
88
- ## Default value be like –
51
+ ```html
52
+ <uxp-ruclib-virtual-scroll
53
+ [rucInputData]="virtualScrollConfig"
54
+ [customTheme]="customTheme">
55
+ <!-- Put your component here -->
56
+ </uxp-ruclib-virtual-scroll>
57
+ ```
89
58
 
90
- ```
91
- rucInputData = {
92
- viewportWidth: '70%',
93
- viewportHeight: '50vh',
94
- itemSize: 40,
95
- backToTopIcon: 'arrow_upward',
96
- backToTopLabel: 'Move to Top',
97
- iconColor: 'primary | accent | warn', // chose only 1 color here
98
- isLoad: true,
99
- isBackToTopIcon: true,
100
- thumbColor: 'red',
101
- trackColor: 'aqua',
102
- };
59
+ ## API Reference
60
+
61
+ ### Component Inputs
62
+
63
+ | Input | Type | Description |
64
+ |----------------|----------------------|-------------------------------------------------------|
65
+ | `rucInputData` | `virtualScrollConfig`| The main configuration object for the Virtual Scroll. |
66
+ | `customTheme` | `string` | An optional CSS class for custom theming. |
67
+
68
+ ### Component Outputs
69
+
70
+ | Output | Type | Description |
71
+ |---------|-----------|-----------------------------------------------|
72
+ |---------|-----------| User can see the UI with virtual scroll data |
73
+
74
+ ### `virtualScrollConfig`
75
+ This is the main configuration object for the Virtual Scroll component.
76
+
77
+ | Property | Type | Description |
78
+ |---------------------------|-------------------------------------|-----------------------------------------------------------------------|
79
+ | `viewportWidth` | `string` | Width of the viewport in percentage of Virtual Scroll. |
80
+ | `viewportHeight` | `boolean` | Height of the viewport in percentage of Virtual Scroll. |
81
+ | `itemSize` | `number` | Size of the element appeared in UI |
82
+ | `backToTopIcon` | `string` | material icon for back to top button. |
83
+ | `backToTopLabel` | `string` | Configure the label for back to top button. |
84
+ | `iconColor` | `'primary' \| 'accent' \| 'warn'` | Change the color of the back to top button. |
85
+ | `isLoad` | `boolean` | It should be true if user want scroll at the end when data loads. |
86
+ | `isBackToTopIcon` | `boolean` | If value of this is true, back to top icon will be enabled. |
87
+ | `thumbColor` | `string` | User can customize thumb color. |
88
+ | `trackColor` | `string` | User can customize track color. |
89
+
90
+ ## Example Configuration
91
+
92
+ Here's an example of how to configure the Virtual Scroll component in your component's TypeScript file.
93
+
94
+ ```typescript
95
+ import { Component } from '@angular/core';
96
+
97
+ // For Complete Library
98
+ import { RucVirtualScrollInput } from '@uxpractice/ruc-lib/virtual-scroll';
99
+
100
+ // For Individual package
101
+ import { RucVirtualScrollInput } from '@ruclib/virtual-scroll';
102
+
103
+ @Component({
104
+ selector: 'app-root',
105
+ templateUrl: './app.component.html',
106
+ })
107
+ export class AppComponent {
108
+ virtualScrollConfig: RucVirtualScrollInput = {
109
+ viewportWidth: '70%',
110
+ viewportHeight: '50vh',
111
+ itemSize: 40,
112
+ backToTopIcon: 'arrow_upward', // user can update accordingly and it should be material icon
113
+ backToTopLabel: 'Move to Top', // user can update accordingly
114
+ iconColor: 'primary', // 'accent', 'warn'
115
+ isLoad: true,
116
+ isBackToTopIcon: true,
117
+ thumbColor: 'green', //ex. '#888'
118
+ trackColor: 'lightgreen', //ex. '#fff'
119
+ };
120
+ }
103
121
  ```
104
122
 
105
- # Contribution
123
+ ## Contribution
124
+
106
125
  Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
107
126
 
108
- # Acknowledgements
109
- Thank you for choosing the Virtual Scroll Component Library. If you have any feedback or suggestions, please let us know!
127
+ ## Acknowledgements
128
+
129
+ Thank you for choosing the Virtual Scroll component. If you have any feedback or suggestions, please let us know!
package/esm2020/model/ruclib-virtual-scroll.model.mjs CHANGED
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvdmlydHVhbC1zY3JvbGwvc3JjL21vZGVsL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXHJcbiAqSW50ZXJmYWNlIGZvciBkZWZpbmluZyB0aGUgVmlydHVhbCBTY3JvbGwgSW5wdXRcclxuICovXHJcbiBleHBvcnQgaW50ZXJmYWNlIFJ1Y1ZpcnR1YWxTY3JvbGxJbnB1dCB7XHJcbiAgICBpdGVtU2l6ZT86IG51bWJlcjtcclxuICAgIHZpZXdwb3J0V2lkdGg/OiBzdHJpbmc7XHJcbiAgICB2aWV3cG9ydEhlaWdodD86IHN0cmluZztcclxuICAgIGJhY2tUb1RvcEljb24/OiBzdHJpbmc7XHJcbiAgICBiYWNrVG9Ub3BMYWJlbD86IHN0cmluZztcclxuICAgIGljb25Db2xvcj86IHN0cmluZztcclxuICAgIGlzQmFja1RvVG9wSWNvbj86IGJvb2xlYW47XHJcbiAgICBpc0xvYWQ/OiBib29sZWFuO1xyXG4gICAgdGh1bWJDb2xvcj86IHN0cmluZztcclxuICAgIHRyYWNrQ29sb3I/OiBzdHJpbmc7XHJcbiAgfSAiXX0=
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9ydWNsaWIvdmlydHVhbC1zY3JvbGwvc3JjL21vZGVsL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXHJcbiAqSW50ZXJmYWNlIGZvciBkZWZpbmluZyB0aGUgVmlydHVhbCBTY3JvbGwgSW5wdXRcclxuICovXHJcbmV4cG9ydCBpbnRlcmZhY2UgUnVjVmlydHVhbFNjcm9sbElucHV0IHtcclxuICAvKipcclxuICAgKiBUaGUgc2l6ZSBvZiBlYWNoIGl0ZW0gaW4gdGhlIGxpc3QgaW4gcGl4ZWxzLlxyXG4gICAqL1xyXG4gIGl0ZW1TaXplPzogbnVtYmVyO1xyXG4gIC8qKlxyXG4gICAqIFRoZSB3aWR0aCBvZiB0aGUgdmlydHVhbCBzY3JvbGwgdmlld3BvcnQuIENhbiBiZSBhIHBlcmNlbnRhZ2UsIHBpeGVscywgb3Igb3RoZXIgQ1NTIHVuaXQuXHJcbiAgICovXHJcbiAgdmlld3BvcnRXaWR0aD86IHN0cmluZztcclxuICAvKipcclxuICAgKiBUaGUgaGVpZ2h0IG9mIHRoZSB2aXJ0dWFsIHNjcm9sbCB2aWV3cG9ydC4gQ2FuIGJlIGEgcGVyY2VudGFnZSwgcGl4ZWxzLCBvciBvdGhlciBDU1MgdW5pdC5cclxuICAgKi9cclxuICB2aWV3cG9ydEhlaWdodD86IHN0cmluZztcclxuICAvKipcclxuICAgKiBUaGUgbmFtZSBvZiB0aGUgTWF0ZXJpYWwgaWNvbiB0byB1c2UgZm9yIHRoZSAnYmFjayB0byB0b3AnIGJ1dHRvbi5cclxuICAgKi9cclxuICBiYWNrVG9Ub3BJY29uPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIFRoZSBsYWJlbCB0ZXh0IGZvciB0aGUgJ2JhY2sgdG8gdG9wJyBidXR0b24uXHJcbiAgICovXHJcbiAgYmFja1RvVG9wTGFiZWw/OiBzdHJpbmc7XHJcbiAgLyoqXHJcbiAgICogVGhlIGNvbG9yIG9mIHRoZSAnYmFjayB0byB0b3AnIGljb24gKGUuZy4sICdwcmltYXJ5JywgJ2FjY2VudCcsICd3YXJuJykuXHJcbiAgICovXHJcbiAgaWNvbkNvbG9yPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIERldGVybWluZXMgd2hldGhlciB0byBkaXNwbGF5IHRoZSAnYmFjayB0byB0b3AnIGljb24uXHJcbiAgICovXHJcbiAgaXNCYWNrVG9Ub3BJY29uPzogYm9vbGVhbjtcclxuICAvKipcclxuICAgKiBBIGZsYWcgdG8gaW5kaWNhdGUgaWYgdGhlIHZpcnR1YWwgc2Nyb2xsIGlzIGN1cnJlbnRseSBsb2FkaW5nIGRhdGEuXHJcbiAgICovXHJcbiAgaXNMb2FkPzogYm9vbGVhbjtcclxuICAvKipcclxuICAgKiBUaGUgY29sb3Igb2YgdGhlIHNjcm9sbGJhciB0aHVtYi5cclxuICAgKi9cclxuICB0aHVtYkNvbG9yPzogc3RyaW5nO1xyXG4gIC8qKlxyXG4gICAqIFRoZSBjb2xvciBvZiB0aGUgc2Nyb2xsYmFyIHRyYWNrLlxyXG4gICAqL1xyXG4gIHRyYWNrQ29sb3I/OiBzdHJpbmc7XHJcbn0iXX0=
package/model/ruclib-virtual-scroll.model.d.ts CHANGED
@@ -2,14 +2,44 @@
2
2
  *Interface for defining the Virtual Scroll Input
3
3
  */
4
4
  export interface RucVirtualScrollInput {
5
+ /**
6
+ * The size of each item in the list in pixels.
7
+ */
5
8
  itemSize?: number;
9
+ /**
10
+ * The width of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
11
+ */
6
12
  viewportWidth?: string;
13
+ /**
14
+ * The height of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
15
+ */
7
16
  viewportHeight?: string;
17
+ /**
18
+ * The name of the Material icon to use for the 'back to top' button.
19
+ */
8
20
  backToTopIcon?: string;
21
+ /**
22
+ * The label text for the 'back to top' button.
23
+ */
9
24
  backToTopLabel?: string;
25
+ /**
26
+ * The color of the 'back to top' icon (e.g., 'primary', 'accent', 'warn').
27
+ */
10
28
  iconColor?: string;
29
+ /**
30
+ * Determines whether to display the 'back to top' icon.
31
+ */
11
32
  isBackToTopIcon?: boolean;
33
+ /**
34
+ * A flag to indicate if the virtual scroll is currently loading data.
35
+ */
12
36
  isLoad?: boolean;
37
+ /**
38
+ * The color of the scrollbar thumb.
39
+ */
13
40
  thumbColor?: string;
41
+ /**
42
+ * The color of the scrollbar track.
43
+ */
14
44
  trackColor?: string;
15
45
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ruc-lib/virtual-scroll",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0",