mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 07:39:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

ngx, react & vue wrapper final touch

Browse Source
This commit is contained in:
Rene
2019-08-03 10:51:09 +02:00
parent 97ecf359c1
commit 15ca87dd7d
41 changed files with 716 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars-ngx/LICENSE
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 Rene Haas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
packages/overlayscrollbars-ngx/README.md
+111
View File
@@ -0,0 +1,111 @@
<p align="center">
<a href="https://angular.io/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/logo.svg" width="200" height="133" alt="Angular"></a>
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
</p>
<h6 align="center">
<a href="https://github.com/angular/angular"><img src="https://img.shields.io/badge/Angular-%5E7.0.0-DD0031?logo=Angular" alt="Angular"></a>
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.9.0-36befd" alt="OverlayScrollbars"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-ngx"><img src="https://img.shields.io/npm/dt/overlayscrollbars-ngx.svg?style=flat-square" alt="Downloads"></a>
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-ngx/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
</h6>
<h3 align="center">
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/angular/">Example</a>
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
</h3>
<h5 align="center">
The official OverlayScrollbars wrapper for Angular.
</h5>
## Installation
```sh
npm install overlayscrollbars-ngx
```
## Peer Dependencies
OverlayScrollbars for Angular has the following **peer dependencies**:
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
```
npm install overlayscrollbars
```
- The Angular framework: [@angular/core](https://www.npmjs.com/package/@angular/core)
```
npm install @angular/core
```
## TypeScript
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
```
npm install @types/overlayscrollbars
```
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
## Usage
#### CSS
You have to import the `OverlayScrollbars.css` by yourself.<br>
The component **doesn't** do it for you as the styles are **global styles**!<br>
There are different ways to achieve this, in Angular the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-ngx/example/src/styles.css#L1) in the `styles` file:
```css
@import '~overlayscrollbars/css/OverlayScrollbars.css';
```
#### Import
First you need to import the module into your modules file:
```ts
import { NgModule } from '@angular/core';
import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
@NgModule({
imports: [ OverlayscrollbarsModule ]
})
export class AppModule { }
```
After that you can import the component into your file(s):
```ts
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
```
#### Template
After the import you can use it in templates like:
```html
<overlay-scrollbars>
example content
</overlay-scrollbars>
```
#### Properties
Two properties are accepted: `options` and `extensions`.
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
```html
<overlay-scrollbars
[options]="{ scrollbars: { autoHide: 'scroll' } }"
[extensions]="['extensionA', 'extensionB']"
>
</overlay-scrollbars>
```
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
#### Instance
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
## Example App
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/angular/)
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx/example)
If you wanna build the example app, run these commands:
```sh
npm run setup
npm run build
npm run example
```
## License
MIT
packages/overlayscrollbars-ngx/build.js
+3 -4
View File
@@ -20,7 +20,6 @@ const packagePaths = {
}
const rollupUmdGlobals = {
'@angular/core': 'ng.core',
'@angular/common': 'ng.common',
'rxjs': 'rxjs',
'overlayscrollbars': 'OverlayScrollbars'
};
@@ -28,6 +27,7 @@ const rollupUmdGlobals = {
const packageJson = require(filesInfo.packageJsonPath);
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
const path = require('path');
const sh = require('shelljs');
const chalk = require('chalk');
const gulp = require('gulp');
@@ -99,9 +99,8 @@ gulp.task('packageJson', function (done) {
...packagePaths,
name: packageName,
files: [
filesInfo.srcFolder,
filesInfo.distFolder,
'README.md'
path.normalize(filesInfo.srcFolder),
path.normalize(filesInfo.distFolder)
]
};
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.esm.js
Vendored
+5 -5
View File
@@ -29,17 +29,17 @@ var OverlayScrollbarsComponent = (function () {
};
OverlayScrollbarsComponent.decorators = [
{ type: Component, args: [{
selector: "overlay-scrollbars",
template: "<ng-content></ng-content>",
styles: [":host { display: block; }"]
selector: 'overlay-scrollbars',
template: '<ng-content></ng-content>',
styles: [':host { display: block; }']
},] },
];
OverlayScrollbarsComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
OverlayScrollbarsComponent.propDecorators = {
_options: [{ type: Input, args: ["options",] }],
_extensions: [{ type: Input, args: ["extensions",] }]
_options: [{ type: Input, args: ['options',] }],
_extensions: [{ type: Input, args: ['extensions',] }]
};
return OverlayScrollbarsComponent;
}());
packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.esm.js.map
Vendored
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"overlayscrollbars-ngx.esm.js","sources":["../ngc/src/overlayscrollbars.component.js","../ngc/src/overlayscrollbars.module.js"],"sourcesContent":["import { Component, ElementRef, Input } from \"@angular/core\";\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\nvar OverlayScrollbarsComponent = (function () {\r\n function OverlayScrollbarsComponent(_osTargetRef) {\r\n this._osInstance = null;\r\n this._osTargetRef = _osTargetRef;\r\n }\r\n OverlayScrollbarsComponent.prototype.osInstance = function () {\r\n return this._osInstance;\r\n };\r\n OverlayScrollbarsComponent.prototype.osTarget = function () {\r\n return this._osTargetRef.nativeElement || null;\r\n };\r\n OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnChanges = function (changes) {\r\n var optionsChange = changes._options;\r\n if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(optionsChange.currentValue);\r\n }\r\n };\r\n OverlayScrollbarsComponent.decorators = [\r\n { type: Component, args: [{\r\n selector: \"overlay-scrollbars\",\r\n template: \"<ng-content></ng-content>\",\r\n styles: [\":host { display: block; }\"]\r\n },] },\r\n ];\r\n OverlayScrollbarsComponent.ctorParameters = function () { return [\r\n { type: ElementRef }\r\n ]; };\r\n OverlayScrollbarsComponent.propDecorators = {\r\n _options: [{ type: Input, args: [\"options\",] }],\r\n _extensions: [{ type: Input, args: [\"extensions\",] }]\r\n };\r\n return OverlayScrollbarsComponent;\r\n}());\r\nexport { OverlayScrollbarsComponent };\r\nif (false) {\r\n OverlayScrollbarsComponent.prototype._options;\r\n OverlayScrollbarsComponent.prototype._extensions;\r\n OverlayScrollbarsComponent.prototype._osInstance;\r\n OverlayScrollbarsComponent.prototype._osTargetRef;\r\n}\r\n//# sourceMappingURL=overlayscrollbars.component.js.map","import { NgModule } from '@angular/core';\r\nimport { OverlayScrollbarsComponent } from './overlayscrollbars.component';\r\nvar OverlayscrollbarsModule = (function () {\r\n function OverlayscrollbarsModule() {\r\n }\r\n OverlayscrollbarsModule.decorators = [\r\n { type: NgModule, args: [{\r\n imports: [],\r\n declarations: [OverlayScrollbarsComponent],\r\n exports: [OverlayScrollbarsComponent]\r\n },] },\r\n ];\r\n return OverlayscrollbarsModule;\r\n}());\r\nexport { OverlayscrollbarsModule };\r\n//# sourceMappingURL=overlayscrollbars.module.js.map"],"names":[],"mappings":";;;AAEG,IAAC,0BAA0B,IAAI,YAAY;IAC1C,SAAS,0BAA0B,CAAC,YAAY,EAAE;QAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KACpC;IACD,0BAA0B,CAAC,SAAS,CAAC,UAAU,GAAG,YAAY;QAC1D,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,QAAQ,GAAG,YAAY;QACxD,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,IAAI,IAAI,CAAC;KAClD,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,eAAe,GAAG,YAAY;QAC/D,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAChG,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,YAAY;QAC3D,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,OAAO,EAAE;QAClE,IAAI,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrC,IAAI,aAAa,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC5D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACxD;KACJ,CAAC;IACF,0BAA0B,CAAC,UAAU,GAAG;QACpC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oBACd,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,2BAA2B;oBACrC,MAAM,EAAE,CAAC,2BAA2B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,0BAA0B,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO;QAC7D,EAAE,IAAI,EAAE,UAAU,EAAE;KACvB,CAAC,EAAE,CAAC;IACL,0BAA0B,CAAC,cAAc,GAAG;QACxC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;QAC/C,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC;KACxD,CAAC;IACF,OAAO,0BAA0B,CAAC;CACrC,EAAE,CAAC;;ACzCD,IAAC,uBAAuB,IAAI,YAAY;IACvC,SAAS,uBAAuB,GAAG;KAClC;IACD,uBAAuB,CAAC,UAAU,GAAG;QACjC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oBACb,OAAO,EAAE,EAAE;oBACX,YAAY,EAAE,CAAC,0BAA0B,CAAC;oBAC1C,OAAO,EAAE,CAAC,0BAA0B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,OAAO,uBAAuB,CAAC;CAClC,EAAE,CAAC;;;;"}
{"version":3,"file":"overlayscrollbars-ngx.esm.js","sources":["../ngc/src/overlayscrollbars.component.js","../ngc/src/overlayscrollbars.module.js"],"sourcesContent":["import { Component, ElementRef, Input } from '@angular/core';\r\nimport OverlayScrollbars from 'overlayscrollbars';\r\nvar OverlayScrollbarsComponent = (function () {\r\n function OverlayScrollbarsComponent(_osTargetRef) {\r\n this._osInstance = null;\r\n this._osTargetRef = _osTargetRef;\r\n }\r\n OverlayScrollbarsComponent.prototype.osInstance = function () {\r\n return this._osInstance;\r\n };\r\n OverlayScrollbarsComponent.prototype.osTarget = function () {\r\n return this._osTargetRef.nativeElement || null;\r\n };\r\n OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n };\r\n OverlayScrollbarsComponent.prototype.ngOnChanges = function (changes) {\r\n var optionsChange = changes._options;\r\n if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(optionsChange.currentValue);\r\n }\r\n };\r\n OverlayScrollbarsComponent.decorators = [\r\n { type: Component, args: [{\r\n selector: 'overlay-scrollbars',\r\n template: '<ng-content></ng-content>',\r\n styles: [':host { display: block; }']\r\n },] },\r\n ];\r\n OverlayScrollbarsComponent.ctorParameters = function () { return [\r\n { type: ElementRef }\r\n ]; };\r\n OverlayScrollbarsComponent.propDecorators = {\r\n _options: [{ type: Input, args: ['options',] }],\r\n _extensions: [{ type: Input, args: ['extensions',] }]\r\n };\r\n return OverlayScrollbarsComponent;\r\n}());\r\nexport { OverlayScrollbarsComponent };\r\nif (false) {\r\n OverlayScrollbarsComponent.prototype._options;\r\n OverlayScrollbarsComponent.prototype._extensions;\r\n OverlayScrollbarsComponent.prototype._osInstance;\r\n OverlayScrollbarsComponent.prototype._osTargetRef;\r\n}\r\n//# sourceMappingURL=overlayscrollbars.component.js.map","import { NgModule } from '@angular/core';\r\nimport { OverlayScrollbarsComponent } from './overlayscrollbars.component';\r\nvar OverlayscrollbarsModule = (function () {\r\n function OverlayscrollbarsModule() {\r\n }\r\n OverlayscrollbarsModule.decorators = [\r\n { type: NgModule, args: [{\r\n imports: [],\r\n declarations: [OverlayScrollbarsComponent],\r\n exports: [OverlayScrollbarsComponent]\r\n },] },\r\n ];\r\n return OverlayscrollbarsModule;\r\n}());\r\nexport { OverlayscrollbarsModule };\r\n//# sourceMappingURL=overlayscrollbars.module.js.map"],"names":[],"mappings":";;;AAEG,IAAC,0BAA0B,IAAI,YAAY;IAC1C,SAAS,0BAA0B,CAAC,YAAY,EAAE;QAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;KACpC;IACD,0BAA0B,CAAC,SAAS,CAAC,UAAU,GAAG,YAAY;QAC1D,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,QAAQ,GAAG,YAAY;QACxD,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,IAAI,IAAI,CAAC;KAClD,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,eAAe,GAAG,YAAY;QAC/D,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;KAChG,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,YAAY;QAC3D,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ,CAAC;IACF,0BAA0B,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,OAAO,EAAE;QAClE,IAAI,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAC;QACrC,IAAI,aAAa,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC5D,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACxD;KACJ,CAAC;IACF,0BAA0B,CAAC,UAAU,GAAG;QACpC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oBACd,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE,2BAA2B;oBACrC,MAAM,EAAE,CAAC,2BAA2B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,0BAA0B,CAAC,cAAc,GAAG,YAAY,EAAE,OAAO;QAC7D,EAAE,IAAI,EAAE,UAAU,EAAE;KACvB,CAAC,EAAE,CAAC;IACL,0BAA0B,CAAC,cAAc,GAAG;QACxC,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;QAC/C,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC;KACxD,CAAC;IACF,OAAO,0BAA0B,CAAC;CACrC,EAAE,CAAC;;ACzCD,IAAC,uBAAuB,IAAI,YAAY;IACvC,SAAS,uBAAuB,GAAG;KAClC;IACD,uBAAuB,CAAC,UAAU,GAAG;QACjC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oBACb,OAAO,EAAE,EAAE;oBACX,YAAY,EAAE,CAAC,0BAA0B,CAAC;oBAC1C,OAAO,EAAE,CAAC,0BAA0B,CAAC;iBACxC,EAAE,EAAE;KAChB,CAAC;IACF,OAAO,uBAAuB,CAAC;CAClC,EAAE,CAAC;;;;"}
packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.js
Vendored
+5 -5
View File
@@ -34,17 +34,17 @@
};
OverlayScrollbarsComponent.decorators = [
{ type: core.Component, args: [{
selector: "overlay-scrollbars",
template: "<ng-content></ng-content>",
styles: [":host { display: block; }"]
selector: 'overlay-scrollbars',
template: '<ng-content></ng-content>',
styles: [':host { display: block; }']
},] },
];
OverlayScrollbarsComponent.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
OverlayScrollbarsComponent.propDecorators = {
_options: [{ type: core.Input, args: ["options",] }],
_extensions: [{ type: core.Input, args: ["extensions",] }]
_options: [{ type: core.Input, args: ['options',] }],
_extensions: [{ type: core.Input, args: ['extensions',] }]
};
return OverlayScrollbarsComponent;
}());
packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars-ngx/dist/types/overlayscrollbars.component.d.ts
Vendored
+2 -2
View File
@@ -1,5 +1,5 @@
import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from "@angular/core";
import OverlayScrollbars from "overlayscrollbars";
import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
import OverlayScrollbars from 'overlayscrollbars';
export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
private _options;
private _extensions;
packages/overlayscrollbars-ngx/example/package-lock.json
Generated
+37 -51
View File
@@ -1357,9 +1357,9 @@
"optional": true
},
"async-limiter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true
},
"asynckit": {
@@ -2039,9 +2039,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30000985",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000985.tgz",
"integrity": "sha512-1ngiwkgqAYPG0JSSUp3PUDGPKKY59EK7NrGGX+VOxaKCNzRbNc7uXMny+c3VJfZxtoK3wSImTvG9T9sXiTw2+w==",
"version": "1.0.30000988",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000988.tgz",
"integrity": "sha512-lPj3T8poYrRc/bniW5SQPND3GRtSrQdUM/R4mCYTbZxyi3jQiggLvZH4+BYUuX0t4TXjU+vMM7KFDQg+rSzZUQ==",
"dev": true
},
"canonical-path": {
@@ -2317,9 +2317,9 @@
"dev": true
},
"compare-versions": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.5.0.tgz",
"integrity": "sha512-hX+4kt2Rcwu+x1U0SsEFCn1quURjEjPEGH/cPBlpME/IidGimAdwfMU+B+xDr7et/KTR7VH2+ZqWGerv4NGs2w==",
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.5.1.tgz",
"integrity": "sha512-9fGPIB7C6AyM18CJJBHt5EnCZDG3oiTJYy0NjfIAGjKpzv0tkxWko7TNQHF5ymqm7IH03tqmeuBxtvD+Izh6mg==",
"dev": true
},
"component-bind": {
@@ -2967,9 +2967,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.3.201",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.201.tgz",
"integrity": "sha512-aCTPIfY1Jvuam5b6vuWRjt1F8i4kY7zX0Qtpu5SNd6l1zjuxU9fDNpbM4o6+oJsra+TMD2o7D20GnkSIgpTr9w==",
"version": "1.3.212",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.212.tgz",
"integrity": "sha512-H8z5Smi1s1u1zGegEBfbxUAzrxyk1JoRHHHrlNGfhxv3sTb+p/Jz7JDvrR4196Q/Ip8r4+XwWcLvKrUjFKoJAg==",
"dev": true
},
"elliptic": {
@@ -3238,9 +3238,9 @@
"dev": true
},
"esutils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
"dev": true
},
"etag": {
@@ -3927,14 +3927,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3949,20 +3947,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4079,8 +4074,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -4092,7 +4086,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4107,7 +4100,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4115,14 +4107,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4141,7 +4131,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4222,8 +4211,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -4235,7 +4223,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4357,7 +4344,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -7020,9 +7006,9 @@
},
"dependencies": {
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
@@ -8038,9 +8024,9 @@
"dev": true
},
"webdriver-manager": {
"version": "12.1.5",
"resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.5.tgz",
"integrity": "sha512-f1apDjMpZ8SHlXtXGzqBxOjV+WQcDRz5PN7pWScgjXS7vhUIFcM3V89Shetf4A04n8DDR2MxiVQq6JproFcRZw==",
"version": "12.1.6",
"resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.6.tgz",
"integrity": "sha512-B1mOycNCrbk7xODw7Jgq/mdD3qzPxMaTsnKIQDy2nXlQoyjTrJTTD0vRpEZI9b8RibPEyQvh9zIZ0M1mpOxS3w==",
"dev": true,
"requires": {
"adm-zip": "^0.4.9",
@@ -8081,9 +8067,9 @@
"dev": true
},
"psl": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.2.0.tgz",
"integrity": "sha512-GEn74ZffufCmkDDLNcl3uuyF/aSD6exEyh1v/ZSdAomB82t6G9hzJVRx0jBmLDW+VfZqks3aScmMw9DszwUalA==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
"integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==",
"dev": true
},
"public-encrypt": {
@@ -9732,9 +9718,9 @@
"dev": true
},
"source-map-support": {
"version": "0.5.12",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
"integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
"dev": true,
"requires": {
"buffer-from": "^1.0.0",
@@ -10143,9 +10129,9 @@
},
"dependencies": {
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
packages/overlayscrollbars-ngx/example/src/app/app.component.css
+4
View File
@@ -1,3 +1,7 @@
:host {
min-width: 600px;
display: block;
}
.header {
background: #36befd;
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
packages/overlayscrollbars-ngx/example/src/app/app.component.html
+4 -2
View File
@@ -41,10 +41,12 @@
</div>
<div class="content-section-content">
<overlay-scrollbars #osComponentRef1 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'350px' }" [ngClass]="['custom-class-name-test', framework]">
<overlay-scrollbars #osComponentRef1 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'350px' }"
[ngClass]="['custom-class-name-test', framework]">
<div class="bonus-content">{{ componentContent }}</div>
{{ loremIpsumShort }}
<overlay-scrollbars #osComponentRef2 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'150px' }" [ngClass]="['custom-class-name-test']">
<overlay-scrollbars #osComponentRef2 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'150px' }"
[ngClass]="['custom-class-name-test']">
<div class="bonus-content">{{ componentContent }}</div>
{{ loremIpsumLong }}
<br />
packages/overlayscrollbars-ngx/example/src/app/app.component.ts
+9 -9
View File
@@ -1,6 +1,6 @@
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
import OverlayScrollbarsfrom from 'overlayscrollbars';
import OverlayScrollbars from 'overlayscrollbars';
@Component({
selector: 'app-root',
@@ -60,24 +60,24 @@ export class AppComponent {
onBtnChangeContent(event) {
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
let random = Math.floor(Math.random() * loremIpsums.length);
this.componentContent = this.componentContent + "\r\n" + loremIpsums[random]
this.componentContent = this.componentContent + '\r\n' + loremIpsums[random]
}
onBtnLog(event) {
console.log(`== ${this.componentClass} (1) ==`);
console.log("Ref:");
console.log('Ref:');
console.log(this.osComponentRef1);
console.log("Instance:");
console.log('Instance:');
console.log(this.osComponentRef1.osInstance());
console.log("Target:");
console.log('Target:');
console.log(this.osComponentRef1.osTarget());
console.log("");
console.log('');
console.log(`== ${this.componentClass} (2) ==`);
console.log("Ref:");
console.log('Ref:');
console.log(this.osComponentRef2);
console.log("Instance:");
console.log('Instance:');
console.log(this.osComponentRef2.osInstance());
console.log("Target:");
console.log('Target:');
console.log(this.osComponentRef2.osTarget());
}
}
packages/overlayscrollbars-ngx/package-lock.json
Generated
+28 -40
View File
@@ -4,15 +4,6 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@angular/common": {
"version": "7.2.15",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.15.tgz",
"integrity": "sha512-2b5JY2HWVHCf3D1GZjmde7jdAXSTXkYtmjLtA9tQkjOOTr80eHpNSujQqnzb97dk9VT9OjfjqTQd7K3pxZz8jw==",
"dev": true,
"requires": {
"tslib": "^1.9.0"
}
},
"@angular/compiler": {
"version": "7.2.15",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.2.15.tgz",
@@ -70,9 +61,9 @@
"dev": true
},
"@types/node": {
"version": "12.6.8",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
"version": "12.6.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
"integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw==",
"dev": true
},
"@types/overlayscrollbars": {
@@ -1295,14 +1286,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1317,20 +1306,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -1447,8 +1433,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -1460,7 +1445,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -1475,7 +1459,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1483,14 +1466,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -1509,7 +1490,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -1590,8 +1570,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -1603,7 +1582,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -1725,7 +1703,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -3339,9 +3316,9 @@
"dev": true
},
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
@@ -3379,13 +3356,13 @@
"dev": true
},
"rollup": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz",
"integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==",
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.18.0.tgz",
"integrity": "sha512-MBAWr6ectF948gW/bs/yfi0jW7DzwI8n0tEYG/ZMQutmK+blF/Oazyhg3oPqtScCGV8bzCtL9KzlzPtTriEOJA==",
"dev": true,
"requires": {
"@types/estree": "0.0.39",
"@types/node": "^12.6.2",
"@types/node": "^12.6.3",
"acorn": "^6.2.0"
}
},
@@ -3425,6 +3402,17 @@
"resolve": "1.11.1",
"rollup-pluginutils": "2.8.1",
"tslib": "1.10.0"
},
"dependencies": {
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
"rollup-pluginutils": {
packages/overlayscrollbars-ngx/package.json
+3 -5
View File
@@ -8,9 +8,8 @@
"angular"
],
"files": [
"./src",
"./dist",
"README.md"
"src",
"dist"
],
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"repository": {
@@ -26,7 +25,6 @@
"author": "KingSora | Rene Haas",
"license": "MIT",
"devDependencies": {
"@angular/common": "^7.0.0",
"@angular/compiler": "^7.0.0",
"@angular/compiler-cli": "^7.0.0",
"@angular/core": "^7.0.0",
@@ -46,7 +44,6 @@
"zone.js": "^0.8.26"
},
"peerDependencies": {
"@angular/common": "^7.0.0",
"@angular/core": "^7.0.0",
"overlayscrollbars": "^1.9.0"
},
@@ -54,6 +51,7 @@
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npx ng serve",
"build-example": "cd example && npx ng build --prod --base-href \"/OverlayScrollbars/frameworks/angular/\" --aot=false --build-optimizer=false",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts
+7 -7
View File
@@ -1,14 +1,14 @@
import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from "@angular/core";
import OverlayScrollbars from "overlayscrollbars";
import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
import OverlayScrollbars from 'overlayscrollbars';
@Component({
selector: "overlay-scrollbars", //https://angular.io/guide/styleguide#component-selectors
template: "<ng-content></ng-content>",
styles: [":host { display: block; }"]
selector: 'overlay-scrollbars', //https://angular.io/guide/styleguide#component-selectors
template: '<ng-content></ng-content>',
styles: [':host { display: block; }']
})
export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
@Input("options") private _options: OverlayScrollbars.Options;
@Input("extensions") private _extensions: OverlayScrollbars.Extensions;
@Input('options') private _options: OverlayScrollbars.Options;
@Input('extensions') private _extensions: OverlayScrollbars.Extensions;
private _osInstance: OverlayScrollbars | null = null;
private _osTargetRef: ElementRef;
packages/overlayscrollbars-react/LICENSE
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 Rene Haas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
packages/overlayscrollbars-react/README.md
+102
View File
@@ -0,0 +1,102 @@
<p align="center">
<a href="https://reactjs.org/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/react/logo.svg" width="200" height="133" alt="React"></a>
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
</p>
<h6 align="center">
<a href="https://github.com/facebook/react/"><img src="https://img.shields.io/badge/React-%5E16.4.0-61dafb?logo=React" alt="React"></a>
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.9.0-36befd" alt="OverlayScrollbars"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-react"><img src="https://img.shields.io/npm/dt/overlayscrollbars-react.svg?style=flat-square" alt="Downloads"></a>
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
</h6>
<h3 align="center">
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/react/">Example</a>
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
</h3>
<h5 align="center">
The official OverlayScrollbars wrapper for React.
</h5>
## Installation
```sh
npm install overlayscrollbars-react
```
## Peer Dependencies
OverlayScrollbars for React has the following **peer dependencies**:
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
```
npm install overlayscrollbars
```
- The React framework: [react](https://www.npmjs.com/package/react)
```
npm install react
```
## TypeScript
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
```
npm install @types/overlayscrollbars
```
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
## Usage
#### CSS
You have to import the `OverlayScrollbars.css` by yourself.<br>
The component **doesn't** do it for you as the styles are **global styles**!<br>
There are different ways to achieve this, in React the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-react/example/src/index.tsx#L1) in the `index` file:
```js
import 'overlayscrollbars/css/OverlayScrollbars.css';
```
#### Import
Simply import the component into your file(s):
```js
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
```
#### Template
After the import you can use it in JSX:
```jsx
<OverlayScrollbarsComponent>
example content
</OverlayScrollbarsComponent>
```
#### Properties
Two properties are accepted: `options` and `extensions`.
- The `options` property accepts a `object` and can be changed at any point in time, and the plugin will adapt.
- The `extensions` property accepts a `string`, `string array` or `object` and is only taken into account if the component gets mounted.
```jsx
<OverlayScrollbarsComponent
options={{ scrollbars: { autoHide: 'scroll' } }}
extensions={['extensionA', 'extensionB']}
>
</OverlayScrollbarsComponent>
```
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
#### Instance
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
## Example App
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/react/)
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react/example)
If you wanna build the example app, run these commands:
```sh
npm run setup
npm run build
npm run example
```
## License
MIT
packages/overlayscrollbars-react/build.js
+3 -3
View File
@@ -23,6 +23,7 @@ const rollupUmdGlobals = {
const packageJson = require(filesInfo.packageJsonPath);
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
const path = require('path');
const sh = require('shelljs');
const chalk = require('chalk');
const gulp = require('gulp');
@@ -77,9 +78,8 @@ gulp.task('packageJson', function (done) {
...packagePaths,
name: packageName,
files: [
filesInfo.srcFolder,
filesInfo.distFolder,
'README.md'
path.normalize(filesInfo.srcFolder),
path.normalize(filesInfo.distFolder)
]
};
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
packages/overlayscrollbars-react/example/package-lock.json
Generated
+80 -101
View File
@@ -1676,9 +1676,9 @@
"integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
},
"acorn-globals": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.2.tgz",
"integrity": "sha512-BbzvZhVtZP+Bs1J1HcwrQe8ycfO0wStkSGxuul3He3GkHOIZ6eTqOkPuw9IP1X3+IkOo4wiJmwkobzXYz4wewQ==",
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.3.tgz",
"integrity": "sha512-vkR40VwS2SYO98AIeFvzWWh+xyc2qi9s7OoXSFEGIP/rOJKzjnhykaZJNnHdoq4BL2gGxI5EZOU16z896EYnOQ==",
"requires": {
"acorn": "^6.0.1",
"acorn-walk": "^6.0.1"
@@ -1934,9 +1934,9 @@
"integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
},
"async-limiter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
},
"asynckit": {
"version": "0.4.0",
@@ -2754,9 +2754,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30000985",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000985.tgz",
"integrity": "sha512-1ngiwkgqAYPG0JSSUp3PUDGPKKY59EK7NrGGX+VOxaKCNzRbNc7uXMny+c3VJfZxtoK3wSImTvG9T9sXiTw2+w=="
"version": "1.0.30000988",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000988.tgz",
"integrity": "sha512-lPj3T8poYrRc/bniW5SQPND3GRtSrQdUM/R4mCYTbZxyi3jQiggLvZH4+BYUuX0t4TXjU+vMM7KFDQg+rSzZUQ=="
},
"capture-exit": {
"version": "2.0.0",
@@ -2827,8 +2827,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@@ -2846,13 +2845,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -2865,18 +2862,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -2979,8 +2973,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -2990,7 +2983,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3003,20 +2995,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3033,7 +3022,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3106,8 +3094,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -3117,7 +3104,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -3193,8 +3179,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -3224,7 +3209,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -3242,7 +3226,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -3281,13 +3264,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
@@ -4254,12 +4235,19 @@
}
},
"dom-serializer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
"integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
"integrity": "sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==",
"requires": {
"domelementtype": "^1.3.0",
"entities": "^1.1.1"
"domelementtype": "^2.0.1",
"entities": "^2.0.0"
},
"dependencies": {
"domelementtype": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
"integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
}
}
},
"domain-browser": {
@@ -4346,9 +4334,9 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"electron-to-chromium": {
"version": "1.3.200",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.200.tgz",
"integrity": "sha512-PUurrpyDA74MuAjJRD+79ss5BqJlU3mdArRbuu4wO/dt6jc3Ic/6BDmFJxkdwbfq39cHf/XKm2vW98XSvut9Dg=="
"version": "1.3.212",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.212.tgz",
"integrity": "sha512-H8z5Smi1s1u1zGegEBfbxUAzrxyk1JoRHHHrlNGfhxv3sTb+p/Jz7JDvrR4196Q/Ip8r4+XwWcLvKrUjFKoJAg=="
},
"elliptic": {
"version": "6.5.0",
@@ -4398,9 +4386,9 @@
}
},
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
"integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
},
"errno": {
"version": "0.1.7",
@@ -4895,9 +4883,9 @@
"integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
},
"esutils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
},
"etag": {
"version": "1.8.1",
@@ -5867,6 +5855,11 @@
"readable-stream": "^3.1.1"
},
"dependencies": {
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
},
"readable-stream": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
@@ -6702,13 +6695,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -6721,18 +6712,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -6835,8 +6823,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -6846,7 +6833,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -6859,20 +6845,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -6889,7 +6872,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -6962,8 +6944,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -6973,7 +6954,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -7079,7 +7059,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -7975,9 +7954,9 @@
}
},
"merge2": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
"integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA=="
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.4.tgz",
"integrity": "sha512-FYE8xI+6pjFOhokZu0We3S5NKCirLbCzSh2Usf3qEyr4X8U+0jNg9P8RZ4qz+V2UoECLVwSyzU3LxXBaLGtD3A=="
},
"methods": {
"version": "1.1.2",
@@ -9439,9 +9418,9 @@
}
},
"postcss-nesting": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.0.tgz",
"integrity": "sha512-WSsbVd5Ampi3Y0nk/SKr5+K34n52PqMqEfswu6RtU4r7wA8vSD+gM8/D9qq4aJkHImwn1+9iEFTbjoWsQeqtaQ==",
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
"integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
"requires": {
"postcss": "^7.0.2"
}
@@ -9760,9 +9739,9 @@
"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
},
"pretty-bytes": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.2.0.tgz",
"integrity": "sha512-ujANBhiUsl9AhREUDUEY1GPOharMGm8x8juS7qOHybcLi7XsKfrYQ88hSly1l2i0klXHTDYrlL8ihMCG55Dc3w=="
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
"integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg=="
},
"pretty-error": {
"version": "2.1.1",
@@ -9858,9 +9837,9 @@
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
},
"psl": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.2.0.tgz",
"integrity": "sha512-GEn74ZffufCmkDDLNcl3uuyF/aSD6exEyh1v/ZSdAomB82t6G9hzJVRx0jBmLDW+VfZqks3aScmMw9DszwUalA=="
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
"integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag=="
},
"public-encrypt": {
"version": "4.0.3",
@@ -11129,9 +11108,9 @@
}
},
"source-map-support": {
"version": "0.5.12",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
"integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
"requires": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
@@ -11178,9 +11157,9 @@
"integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q=="
},
"spdy": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
"integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.1.tgz",
"integrity": "sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==",
"requires": {
"debug": "^4.1.0",
"handle-thing": "^2.0.0",
@@ -11463,9 +11442,9 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"table": {
"version": "5.4.4",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.4.tgz",
"integrity": "sha512-IIfEAUx5QlODLblLrGTTLJA7Tk0iLSGBvgY8essPRVNGHAzThujww1YqHLs6h3HfTg55h++RzLHH5Xw/rfv+mg==",
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.5.tgz",
"integrity": "sha512-oGa2Hl7CQjfoaogtrOHEJroOcYILTx7BZWLGsJIlzoWmB2zmguhNfPJZsWPKYek/MgCxfco54gEi31d1uN2hFA==",
"requires": {
"ajv": "^6.10.2",
"lodash": "^4.17.14",
@@ -11732,9 +11711,9 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
"typescript": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
"integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g=="
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.4.5.tgz",
"integrity": "sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw=="
},
"uglify-js": {
"version": "3.4.10",
@@ -12231,9 +12210,9 @@
}
},
"webpack-sources": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",
"integrity": "sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==",
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.1.tgz",
"integrity": "sha512-XSz38193PTo/1csJabKaV4b53uRVotlMgqJXm3s3eje0Bu6gQTxYDqpD38CmQfDBA+gN+QqaGjasuC8I/7eW3Q==",
"requires": {
"source-list-map": "^2.0.0",
"source-map": "~0.6.1"
packages/overlayscrollbars-react/example/package.json
+2 -1
View File
@@ -2,6 +2,7 @@
"name": "example",
"version": "0.1.0",
"private": true,
"homepage": "/OverlayScrollbars/frameworks/react/",
"dependencies": {
"@types/jest": "24.0.15",
"@types/node": "12.6.8",
@@ -12,7 +13,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"typescript": "3.5.3"
"typescript": ">=3.2.1 <3.5.0"
},
"scripts": {
"start": "react-scripts start",
packages/overlayscrollbars-react/example/public/manifest.json
+14 -14
View File
@@ -1,15 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
packages/overlayscrollbars-react/example/src/App.css
+3
View File
@@ -1,3 +1,6 @@
.App {
min-width: 600px;
}
.header {
background: #36befd;
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
packages/overlayscrollbars-react/example/src/App.tsx
+6 -6
View File
@@ -72,21 +72,21 @@ export default class App extends React.Component<any, AppState> {
let loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
let random = Math.floor(Math.random() * loremIpsums.length);
this.setState({
componentContent: this.state.componentContent + "\r\n" + loremIpsums[random]
componentContent: this.state.componentContent + '\r\n' + loremIpsums[random]
});
}
onBtnLog() {
console.log(`== ${this.componentClass} (1) ==`);
console.log("Instance:");
console.log('Instance:');
console.log(this.osComponentRef1.current!.osInstance());
console.log("Target:");
console.log('Target:');
console.log(this.osComponentRef1.current!.osTarget());
console.log("");
console.log('');
console.log(`== ${this.componentClass} (2) ==`);
console.log("Instance:");
console.log('Instance:');
console.log(this.osComponentRef2.current!.osInstance());
console.log("Target:");
console.log('Target:');
console.log(this.osComponentRef2.current!.osTarget());
}
packages/overlayscrollbars-react/example/src/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import 'overlayscrollbars/css/OverlayScrollbars.css'
import 'overlayscrollbars/css/OverlayScrollbars.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
packages/overlayscrollbars-react/package-lock.json
Generated
+31 -34
View File
@@ -11,9 +11,9 @@
"dev": true
},
"@types/node": {
"version": "12.6.8",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
"version": "12.6.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
"integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw==",
"dev": true
},
"@types/overlayscrollbars": {
@@ -29,9 +29,9 @@
"dev": true
},
"@types/react": {
"version": "16.8.23",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
"integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==",
"version": "16.8.24",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.24.tgz",
"integrity": "sha512-VpFHUoD37YNY2+lr/+c7qL/tZsIU/bKuskUF3tmGUArbxIcQdb5j3zvo4cuuzu2A6UaVmVn7sJ4PgWYNFEBGzg==",
"dev": true,
"requires": {
"@types/prop-types": "*",
@@ -1205,14 +1205,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1227,20 +1225,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -1357,8 +1352,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -1370,7 +1364,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -1385,7 +1378,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1393,14 +1385,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -1419,7 +1409,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -1500,8 +1489,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -1513,7 +1501,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -1635,7 +1622,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -3075,9 +3061,9 @@
"dev": true
},
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
@@ -3115,13 +3101,13 @@
"dev": true
},
"rollup": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz",
"integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==",
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.18.0.tgz",
"integrity": "sha512-MBAWr6ectF948gW/bs/yfi0jW7DzwI8n0tEYG/ZMQutmK+blF/Oazyhg3oPqtScCGV8bzCtL9KzlzPtTriEOJA==",
"dev": true,
"requires": {
"@types/estree": "0.0.39",
"@types/node": "^12.6.2",
"@types/node": "^12.6.3",
"acorn": "^6.2.0"
}
},
@@ -3161,6 +3147,17 @@
"resolve": "1.11.1",
"rollup-pluginutils": "2.8.1",
"tslib": "1.10.0"
},
"dependencies": {
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
"rollup-pluginutils": {
packages/overlayscrollbars-react/package.json
+3 -3
View File
@@ -7,9 +7,8 @@
"react"
],
"files": [
"./src",
"./dist",
"README.md"
"src",
"dist"
],
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"repository": {
@@ -47,6 +46,7 @@
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npm start",
"build-example": "cd example && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
packages/overlayscrollbars-vue/LICENSE
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 Rene Haas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
packages/overlayscrollbars-vue/README.md
+23 -19
View File
@@ -1,11 +1,12 @@
<p align="center">
<img src="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/logo.svg" width="200" height="133" alt="OverlayScrollbars" />
<img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars" />
<a href="https://vuejs.org/"><img src="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/logo.svg" width="200" height="133" alt="Vue"></a>
<a href="https://kingsora.github.io/OverlayScrollbars/"><img src="https://kingsora.github.io/OverlayScrollbars/design/logo.svg" width="200" height="133" alt="OverlayScrollbars"></a>
</p>
<h6 align="center">
<img src="https://img.shields.io/badge/Vue-%5E2.6.10-41B883?style=flat-square&logo=vue.js" alt="Dependencies" />
<img src="https://img.shields.io/npm/dt/overlayscrollbars.svg?style=flat-square" alt="Downloads" />
<img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License" />
<a href="https://github.com/vuejs/vue"><img src="https://img.shields.io/badge/Vue-%5E2.6.0-41B883?style=flat-square&logo=vue.js" alt="Vue"></a>
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.9.0-36befd" alt="OverlayScrollbars"></a>
<a href="https://www.npmjs.com/package/overlayscrollbars-vue"><img src="https://img.shields.io/npm/dt/overlayscrollbars-vue.svg?style=flat-square" alt="Downloads"></a>
<a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-vue/LICENSE"><img src="https://img.shields.io/github/license/kingsora/overlayscrollbars.svg?style=flat-square" alt="License"></a>
</h6>
<h3 align="center">
<a href="https://kingsora.github.io/OverlayScrollbars/frameworks/vue/">Example</a>
@@ -15,7 +16,7 @@
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
</h3>
<h5 align="center">
The official OverlayScrollbars Vue wrapper.
The official OverlayScrollbars wrapper for Vue.
</h5>
## Installation
@@ -33,21 +34,24 @@ npm install overlayscrollbars
```
npm install vue
```
## TypeScript
- In case you are using TypeScript, you have to install the [OverlayScrollbars typings](https://www.npmjs.com/package/@types/overlayscrollbars):
```
npm install -D @types/overlayscrollbars
npm install @types/overlayscrollbars
```
Since this wrapper is written in TypeScript it comes with its generated typings.
Since this wrapper is written in TypeScript it comes with its generated typings.<br>
Check out the [recommended](https://github.com/KingSora/OverlayScrollbars#typescript) **tsconfig.json** options.
## Usage
#### CSS
You have to import the `OverlayScrollbars.css` by yourself.
The component **doesn't** do it for you as the styles are **global styles**!
There are different ways to achieve this, in Vue the most simple way for me was to add this line in the `main` file:
You have to import the `OverlayScrollbars.css` by yourself.<br>
The component **doesn't** do it for you as the styles are **global styles**!<br>
There are different ways to achieve this, in Vue the most simple way for me was to add [this line](https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars-vue/example/src/main.ts#L1) in the `main` file:
```js
import 'overlayscrollbars/css/OverlayScrollbars.css';
```
#### Import
With the [Vue.use](https://vuejs.org/v2/api/#Vue-use) method you can register the wrapper globally:
```js
@@ -56,7 +60,6 @@ import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue';
Vue.use(OverlayScrollbarsPlugin);
```
In case you wanna register the Component manually via [global](https://vuejs.org/v2/guide/components-registration.html#Global-Registration) or [local](https://vuejs.org/v2/guide/components-registration.html#Local-Registration) registration, you can simply import it and do whatever you want with it:
```js
import Vue from 'vue';
@@ -73,6 +76,7 @@ new Vue({
}
});
```
#### Template
After the registration you can use it in templates like:
```html
@@ -90,23 +94,23 @@ Two properties are accepted: `options` and `extensions`.
```vue
<overlay-scrollbars
:options="{ scrollbars: { autoHide: 'scroll' } }"
:extensions="[ 'extensionA', 'extensionB' ]"
>
:extensions="['extensionA', 'extensionB']"
>
</overlay-scrollbars>
```
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), extensions are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
You can read more about the `options` object [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/options), `extensions` are documented [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/extensions-basics) and [here](https://kingsora.github.io/OverlayScrollbars/#!documentation/initialization).
#### Instance
If you get the component reference, it provides two methods: `osInstance()` and `osTarget()`.
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance is't initialized yet or already destroyed.
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component is't mounted yet or already unmounted.
- The `osInstance()` method returns the OverlayScrollbars `instance` of the component, or `null` if the instance isn't initialized yet or already destroyed.
- The `osTarget()` method returns the native `html` element to which the plugin was initialized, or `null` if the the component isn't mounted yet or already unmounted.
## Example App
In case you need a example app for reference:
In case you need a example app for reference, you can use the example app in this repo(`example folder`):
- [Live example](https://kingsora.github.io/OverlayScrollbars/frameworks/vue/)
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue/example)
If you wanna build the example app in this repo, run these commands:
If you wanna build the example app, run these commands:
```sh
npm run setup
npm run build
packages/overlayscrollbars-vue/build.js
+3 -3
View File
@@ -23,6 +23,7 @@ const rollupUmdGlobals = {
const packageJson = require(filesInfo.packageJsonPath);
const tsconfigJson = require(filesInfo.tsconfigJsonPath);
const path = require('path');
const sh = require('shelljs');
const chalk = require('chalk');
const gulp = require('gulp');
@@ -79,9 +80,8 @@ gulp.task('packageJson', function (done) {
...packagePaths,
name: packageName,
files: [
filesInfo.srcFolder,
filesInfo.distFolder,
'README.md'
path.normalize(filesInfo.srcFolder),
path.normalize(filesInfo.distFolder)
]
};
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js
Vendored
+1 -1
View File
@@ -2,7 +2,7 @@ import OverlayScrollbars from 'overlayscrollbars';
import Vue from 'vue';
class OverlayScrollbarsComponent extends Vue.extend({
name: "overlay-scrollbars",
name: 'overlay-scrollbars',
props: {
options: {
type: Object
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js
Vendored
+1 -1
View File
@@ -45,7 +45,7 @@
}
return OverlayScrollbarsComponent;
}(Vue.extend({
name: "overlay-scrollbars",
name: 'overlay-scrollbars',
props: {
options: {
type: Object
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.d.ts
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
import OverlayScrollbars from "overlayscrollbars";
import OverlayScrollbars from 'overlayscrollbars';
export interface OverlayScrollbarsComponentData {
}
export interface OverlayScrollbarsComponentMethods {
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.vue.d.ts
Vendored
+2 -2
View File
@@ -1,5 +1,5 @@
import Vue, { VueConstructor } from "vue";
import { OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps } from "./OverlayScrollbarsComponent";
import Vue, { VueConstructor } from 'vue';
import { OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps } from './OverlayScrollbarsComponent';
declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
export default class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
private _osInstace;
packages/overlayscrollbars-vue/example/package-lock.json
Generated
+92 -86
View File
@@ -971,9 +971,9 @@
"dev": true
},
"@types/node": {
"version": "12.6.8",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
"version": "12.6.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
"integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw==",
"dev": true
},
"@types/normalize-package-data": {
@@ -1280,9 +1280,9 @@
}
},
"@vue/preload-webpack-plugin": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.0.tgz",
"integrity": "sha512-rcn2KhSHESBFMPj5vc5X2pI9bcBNQQixvJXhD5gZ4rN2iym/uH2qfDSQfUS5+qwiz0a85TCkeUs6w6jxFDudbw==",
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.1.tgz",
"integrity": "sha512-8VCoJeeH8tCkzhkpfOkt+abALQkS11OIHhte5MBzYaKMTqK0A3ZAKEUVAffsOklhEv7t0yrQt696Opnu9oAx+w==",
"dev": true
},
"@vue/web-component-wrapper": {
@@ -1752,9 +1752,9 @@
"dev": true
},
"async-limiter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true
},
"asynckit": {
@@ -2259,9 +2259,9 @@
"dev": true
},
"cacache": {
"version": "11.3.3",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.3.tgz",
"integrity": "sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==",
"version": "12.0.2",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.2.tgz",
"integrity": "sha512-ifKgxH2CKhJEg6tNdAwziu6Q33EvuG26tYcda6PT3WKisZcYDXsnEdnRv67Po3yCzFfaSoMjGZzJyD2c3DT1dg==",
"dev": true,
"requires": {
"bluebird": "^3.5.5",
@@ -2269,6 +2269,7 @@
"figgy-pudding": "^3.5.1",
"glob": "^7.1.4",
"graceful-fs": "^4.1.15",
"infer-owner": "^1.0.3",
"lru-cache": "^5.1.1",
"mississippi": "^3.0.0",
"mkdirp": "^0.5.1",
@@ -2382,9 +2383,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30000985",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000985.tgz",
"integrity": "sha512-1ngiwkgqAYPG0JSSUp3PUDGPKKY59EK7NrGGX+VOxaKCNzRbNc7uXMny+c3VJfZxtoK3wSImTvG9T9sXiTw2+w==",
"version": "1.0.30000988",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000988.tgz",
"integrity": "sha512-lPj3T8poYrRc/bniW5SQPND3GRtSrQdUM/R4mCYTbZxyi3jQiggLvZH4+BYUuX0t4TXjU+vMM7KFDQg+rSzZUQ==",
"dev": true
},
"case-sensitive-paths-webpack-plugin": {
@@ -3584,13 +3585,21 @@
}
},
"dom-serializer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
"integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
"integrity": "sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==",
"dev": true,
"requires": {
"domelementtype": "^1.3.0",
"entities": "^1.1.1"
"domelementtype": "^2.0.1",
"entities": "^2.0.0"
},
"dependencies": {
"domelementtype": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
"integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
"dev": true
}
}
},
"domain-browser": {
@@ -3692,9 +3701,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.3.201",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.201.tgz",
"integrity": "sha512-aCTPIfY1Jvuam5b6vuWRjt1F8i4kY7zX0Qtpu5SNd6l1zjuxU9fDNpbM4o6+oJsra+TMD2o7D20GnkSIgpTr9w==",
"version": "1.3.212",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.212.tgz",
"integrity": "sha512-H8z5Smi1s1u1zGegEBfbxUAzrxyk1JoRHHHrlNGfhxv3sTb+p/Jz7JDvrR4196Q/Ip8r4+XwWcLvKrUjFKoJAg==",
"dev": true
},
"elliptic": {
@@ -3751,9 +3760,9 @@
}
},
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
"integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
"dev": true
},
"errno": {
@@ -3852,9 +3861,9 @@
"dev": true
},
"esutils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
"dev": true
},
"etag": {
@@ -4461,14 +4470,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4483,20 +4490,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4613,8 +4617,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -4626,7 +4629,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4641,7 +4643,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4649,14 +4650,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4675,7 +4674,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4756,8 +4754,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -4769,7 +4766,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4891,7 +4887,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -5209,9 +5204,9 @@
"dev": true
},
"highlight.js": {
"version": "9.15.8",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.8.tgz",
"integrity": "sha512-RrapkKQWwE+wKdF73VsOa2RQdIoO3mxwJ4P8mhbI6KYJUraUHRKM5w5zQQKXNk0xNL4UVRdulV9SBJcmzJNzVA==",
"version": "9.15.9",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.9.tgz",
"integrity": "sha512-M0zZvfLr5p0keDMCAhNBp03XJbKBxUx5AfyfufMdFMEP4N/Xj6dh0IqC75ys7BAzceR34NgcvXjupRVaHBPPVQ==",
"dev": true
},
"hmac-drbg": {
@@ -5357,6 +5352,12 @@
"readable-stream": "^3.1.1"
},
"dependencies": {
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
"dev": true
},
"readable-stream": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
@@ -5554,6 +5555,12 @@
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
"integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
"dev": true
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6321,9 +6328,9 @@
}
},
"merge2": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
"integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.4.tgz",
"integrity": "sha512-FYE8xI+6pjFOhokZu0We3S5NKCirLbCzSh2Usf3qEyr4X8U+0jNg9P8RZ4qz+V2UoECLVwSyzU3LxXBaLGtD3A==",
"dev": true
},
"methods": {
@@ -7862,9 +7869,9 @@
"dev": true
},
"psl": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.2.0.tgz",
"integrity": "sha512-GEn74ZffufCmkDDLNcl3uuyF/aSD6exEyh1v/ZSdAomB82t6G9hzJVRx0jBmLDW+VfZqks3aScmMw9DszwUalA==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
"integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==",
"dev": true
},
"public-encrypt": {
@@ -8282,9 +8289,9 @@
"dev": true
},
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
@@ -8865,9 +8872,9 @@
}
},
"source-map-support": {
"version": "0.5.12",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
"integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
"version": "0.5.13",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
"dev": true,
"requires": {
"buffer-from": "^1.0.0",
@@ -8921,9 +8928,9 @@
"dev": true
},
"spdy": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
"integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.1.tgz",
"integrity": "sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==",
"dev": true,
"requires": {
"debug": "^4.1.0",
@@ -9237,9 +9244,9 @@
"dev": true
},
"terser": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.1.2.tgz",
"integrity": "sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==",
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/terser/-/terser-4.1.3.tgz",
"integrity": "sha512-on13d+cnpn5bMouZu+J8tPYQecsdRJCJuxFJ+FVoPBoLJgk5bCBkp+Uen2hWyi0KIUm6eDarnlAlH+KgIx/PuQ==",
"dev": true,
"requires": {
"commander": "^2.20.0",
@@ -9256,20 +9263,19 @@
}
},
"terser-webpack-plugin": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.3.0.tgz",
"integrity": "sha512-W2YWmxPjjkUcOWa4pBEv4OP4er1aeQJlSo2UhtCFQCuRXEHjOFscO8VyWHj9JLlA0RzQb8Y2/Ta78XZvT54uGg==",
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz",
"integrity": "sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==",
"dev": true,
"requires": {
"cacache": "^11.3.2",
"find-cache-dir": "^2.0.0",
"cacache": "^12.0.2",
"find-cache-dir": "^2.1.0",
"is-wsl": "^1.1.0",
"loader-utils": "^1.2.3",
"schema-utils": "^1.0.0",
"serialize-javascript": "^1.7.0",
"source-map": "^0.6.1",
"terser": "^4.0.0",
"webpack-sources": "^1.3.0",
"terser": "^4.1.2",
"webpack-sources": "^1.4.0",
"worker-farm": "^1.7.0"
},
"dependencies": {
@@ -10026,9 +10032,9 @@
}
},
"webpack-bundle-analyzer": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz",
"integrity": "sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.4.1.tgz",
"integrity": "sha512-Bs8D/1zF+17lhqj2OYmzi7HEVYqEVxu7lCO9Ff8BwajenOU0vAwEoV8e4ICCPNZAcqR1PCR/7o2SkW+cnCmF0A==",
"dev": true,
"requires": {
"acorn": "^6.0.7",
@@ -10040,7 +10046,7 @@
"express": "^4.16.3",
"filesize": "^3.6.1",
"gzip-size": "^5.0.0",
"lodash": "^4.17.10",
"lodash": "^4.17.15",
"mkdirp": "^0.5.1",
"opener": "^1.5.1",
"ws": "^6.0.0"
@@ -10323,9 +10329,9 @@
}
},
"webpack-sources": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz",
"integrity": "sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==",
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.1.tgz",
"integrity": "sha512-XSz38193PTo/1csJabKaV4b53uRVotlMgqJXm3s3eje0Bu6gQTxYDqpD38CmQfDBA+gN+QqaGjasuC8I/7eW3Q==",
"dev": true,
"requires": {
"source-list-map": "^2.0.0",
packages/overlayscrollbars-vue/example/src/App.vue
+24 -21
View File
@@ -84,9 +84,9 @@
</template>
<script lang="ts">
import Vue, { VueConstructor } from "vue";
import OverlayScrollbars from "overlayscrollbars";
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
import Vue, { VueConstructor } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
export interface AppData {
framework: string;
@@ -110,20 +110,20 @@ export interface AppComputed { }
export interface AppProps { }
export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
name: "app",
name: 'app',
data: function () {
return {
framework: "Vue",
componentClass: "OverlayScrollbarsComponent",
loremIpsumLong: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
loremIpsumMedium: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
loremIpsumShort: "Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.",
componentContent: "Lorem Ipsum",
framework: 'Vue',
componentClass: 'OverlayScrollbarsComponent',
loremIpsumLong: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
loremIpsumMedium: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.',
loremIpsumShort: 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.',
componentContent: 'Lorem Ipsum',
osComponentOptions: {
resize: "both",
resize: 'both',
paddingAbsolute: true,
scrollbars: {
autoHide: "never"
autoHide: 'never'
}
}
};
@@ -138,7 +138,7 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
osInstance.scrollStop().scroll({
x: Math.floor(Math.random() * osInstance.scroll().max.x + 0),
y: Math.floor(Math.random() * osInstance.scroll().max.y + 0)
}, 1000, "easeOutElastic");
}, 1000, 'easeOutElastic');
}
}
}
@@ -146,9 +146,9 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
},
onBtnChangeOptions() {
this.osComponentOptions = {
resize: this.osComponentOptions.resize === "both" ? "none" : "both",
resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
scrollbars: {
autoHide: this.osComponentOptions.scrollbars!.autoHide === "never" ? "scroll" : "never"
autoHide: this.osComponentOptions.scrollbars!.autoHide === 'never' ? 'scroll' : 'never'
}
};
},
@@ -159,19 +159,19 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
this.loremIpsumShort
];
let random = Math.floor(Math.random() * loremIpsums.length);
this.componentContent = this.componentContent + "\r\n" + loremIpsums[random];
this.componentContent = this.componentContent + '\r\n' + loremIpsums[random];
},
onBtnLog() {
console.log(`== ${this.componentClass} (1) ==`);
console.log("Instance:");
console.log('Instance:');
console.log((this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osInstance());
console.log("Target:");
console.log('Target:');
console.log((this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osTarget());
console.log("");
console.log('');
console.log(`== ${this.componentClass} (2) ==`);
console.log("Instance:");
console.log('Instance:');
console.log((this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osInstance());
console.log("Target:");
console.log('Target:');
console.log((this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osTarget());
}
},
@@ -186,6 +186,9 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
</script>
<style>
#app {
min-width: 600px;
}
.header {
background: #36befd;
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
packages/overlayscrollbars-vue/package-lock.json
Generated
+28 -31
View File
@@ -26,9 +26,9 @@
"dev": true
},
"@types/node": {
"version": "12.6.8",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
"version": "12.6.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.9.tgz",
"integrity": "sha512-+YB9FtyxXGyD54p8rXwWaN1EWEyar5L58GlGWgtH2I9rGmLGBQcw63+0jw+ujqVavNuO47S1ByAjm9zdHMnskw==",
"dev": true
},
"@types/overlayscrollbars": {
@@ -1577,14 +1577,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -1599,20 +1597,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -1729,8 +1724,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -1742,7 +1736,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -1757,7 +1750,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -1765,14 +1757,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -1791,7 +1781,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -1872,8 +1861,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -1885,7 +1873,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -2007,7 +1994,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4073,9 +4059,9 @@
"dev": true
},
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
@@ -4123,13 +4109,13 @@
}
},
"rollup": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz",
"integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==",
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.18.0.tgz",
"integrity": "sha512-MBAWr6ectF948gW/bs/yfi0jW7DzwI8n0tEYG/ZMQutmK+blF/Oazyhg3oPqtScCGV8bzCtL9KzlzPtTriEOJA==",
"dev": true,
"requires": {
"@types/estree": "0.0.39",
"@types/node": "^12.6.2",
"@types/node": "^12.6.3",
"acorn": "^6.2.0"
}
},
@@ -4169,6 +4155,17 @@
"resolve": "1.11.1",
"rollup-pluginutils": "2.8.1",
"tslib": "1.10.0"
},
"dependencies": {
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
"integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
}
}
},
"rollup-plugin-vue": {
packages/overlayscrollbars-vue/package.json
+6 -6
View File
@@ -7,9 +7,8 @@
"vue"
],
"files": [
"./src",
"./dist",
"README.md"
"src",
"dist"
],
"homepage": "https://kingsora.github.io/OverlayScrollbars",
"repository": {
@@ -36,17 +35,18 @@
"rollup-plugin-vue": "^5.0.1",
"shelljs": "0.7.7",
"typescript": "^3.0.3",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
"vue": "^2.6.0",
"vue-template-compiler": "^2.6.0"
},
"peerDependencies": {
"vue": "^2.6.10",
"vue": "^2.6.0",
"overlayscrollbars": "^1.9.0"
},
"scripts": {
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npm run serve",
"build-example": "cd example && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import OverlayScrollbars from "overlayscrollbars";
import OverlayScrollbars from 'overlayscrollbars';
export interface OverlayScrollbarsComponentData { }
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+4 -4
View File
@@ -5,14 +5,14 @@
</template>
<script lang="ts">
import Vue, { VueConstructor, VNode, CreateElement, PropType } from "vue";
import OverlayScrollbars from "overlayscrollbars";
import Vue, { VueConstructor, VNode, CreateElement, PropType } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import {
OverlayScrollbarsComponentData,
OverlayScrollbarsComponentMethods,
OverlayScrollbarsComponentComputed,
OverlayScrollbarsComponentProps
} from "./OverlayScrollbarsComponent";
} from './OverlayScrollbarsComponent';
// https://github.com/vuejs/vue/issues/7060
export default class OverlayScrollbarsComponent extends Vue.extend<
@@ -21,7 +21,7 @@ export default class OverlayScrollbarsComponent extends Vue.extend<
OverlayScrollbarsComponentComputed,
OverlayScrollbarsComponentProps
>({
name: "overlay-scrollbars", // https://vuejs.org/v2/guide/components-registration.html#Component-Names
name: 'overlay-scrollbars', // https://vuejs.org/v2/guide/components-registration.html#Component-Names
props: {
options: {
type: Object as PropType<OverlayScrollbars.Options>