mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 05:49:39 +03:00
resolve
This commit is contained in:
Rene Haas
+1
-1
@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
||||
custom: ['https://www.paypal.me/ReneHaas'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
||||
|
||||
File diff suppressed because one or more lines are too long
Vendored
-13
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Vendored
-13
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Vendored
-13
File diff suppressed because one or more lines are too long
@@ -1,136 +0,0 @@
|
||||
<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-%3E=7.0.0-DD0031?style=flat-square&logo=Angular" alt="Angular"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" 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>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<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
|
||||
@@ -1,15 +0,0 @@
|
||||
import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
|
||||
private ngZone;
|
||||
_options: OverlayScrollbars.Options;
|
||||
_extensions: OverlayScrollbars.Extensions;
|
||||
private _osInstance;
|
||||
private _osTargetRef;
|
||||
constructor(_osTargetRef: ElementRef, ngZone: NgZone);
|
||||
osInstance(): OverlayScrollbars | null;
|
||||
osTarget(): HTMLDivElement | null;
|
||||
ngAfterViewInit(): void;
|
||||
ngOnDestroy(): void;
|
||||
ngOnChanges(changes: SimpleChanges): void;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
|
||||
@@ -1,16 +0,0 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
@@ -1,46 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -1,27 +0,0 @@
|
||||
# Example
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@@ -1,124 +0,0 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"example": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/example",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "example:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "example:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "example:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "example:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "example:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "example"
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
|
||||
|
||||
/**
|
||||
* @type { import("protractor").Config }
|
||||
*/
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
browserName: 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
SELENIUM_PROMISE_MANAGER: false,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({
|
||||
spec: {
|
||||
displayStacktrace: StacktraceOption.PRETTY
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import { AppPage } from './app.po';
|
||||
import { browser, logging } from 'protractor';
|
||||
|
||||
describe('workspace-project App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', async () => {
|
||||
await page.navigateTo();
|
||||
expect(await page.getTitleText()).toEqual('example app is running!');
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
// Assert that there are no errors emitted from the browser
|
||||
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
|
||||
expect(logs).not.toContain(jasmine.objectContaining({
|
||||
level: logging.Level.SEVERE,
|
||||
} as logging.Entry));
|
||||
});
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
async navigateTo(): Promise<unknown> {
|
||||
return browser.get(browser.baseUrl);
|
||||
}
|
||||
|
||||
async getTitleText(): Promise<string> {
|
||||
return element(by.css('app-root .content span')).getText();
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es2018",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, './coverage/example'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
-13544
File diff suppressed because it is too large
Load Diff
@@ -1,47 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.4",
|
||||
"@angular/common": "~11.0.4",
|
||||
"@angular/compiler": "~11.0.4",
|
||||
"@angular/core": "~11.0.4",
|
||||
"@angular/forms": "~11.0.4",
|
||||
"@angular/platform-browser": "~11.0.4",
|
||||
"@angular/platform-browser-dynamic": "~11.0.4",
|
||||
"@angular/router": "~11.0.4",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"overlayscrollbars-ngx": "^0.1.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1100.4",
|
||||
"@angular/cli": "~11.0.4",
|
||||
"@angular/compiler-cli": "~11.0.4",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~5.1.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.0.2"
|
||||
}
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
:host {
|
||||
min-width: 600px;
|
||||
display: block;
|
||||
}
|
||||
.header {
|
||||
background: #36befd;
|
||||
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.1pt;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15),
|
||||
0 55px 50px -35px rgba(47, 78, 249, 0.12);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header code {
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
background: #fff;
|
||||
font-size: 10pt;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
|
||||
}
|
||||
.header code .code-keyword {
|
||||
color: #0059ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header code .code-char {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
.header code .code-variable {
|
||||
color: #3778ad;
|
||||
}
|
||||
.header code .code-string {
|
||||
color: #279737;
|
||||
font-weight: 400;
|
||||
}
|
||||
.content {
|
||||
min-height: calc(100vh - 76px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-section {
|
||||
position: relative;
|
||||
padding: 40px 0px;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.content-section:before,
|
||||
.content-section:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content-section:nth-child(2n - 1) {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section:nth-child(2n - 1):before,
|
||||
.content-section:nth-child(2n - 1):after {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0) {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0):before,
|
||||
.content-section:nth-child(2n + 0):after {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section.skew:before,
|
||||
.content-section.skew:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section.skew + .content-section:before,
|
||||
.content-section.skew + .content-section:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section skew + .content-section.skew:before,
|
||||
.content-section.skew + .content-section.skew:before {
|
||||
top: 0;
|
||||
}
|
||||
.content-section + .content-section.skew:before {
|
||||
top: -50vw;
|
||||
}
|
||||
.content-section.skew + .content-section:after {
|
||||
bottom: -50vw;
|
||||
}
|
||||
.content-section + .content-section:after {
|
||||
top: 0;
|
||||
}
|
||||
.content-section.skew + .content-section.skew:after {
|
||||
bottom: 0;
|
||||
}
|
||||
.content-section.skew:first-child:before {
|
||||
top: -50vw !important;
|
||||
}
|
||||
.content-section.skew:last-child:after {
|
||||
bottom: -50vw !important;
|
||||
}
|
||||
.content-section-content-framework > span {
|
||||
font-weight: bold;
|
||||
font-size: 30pt;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.content-section-content-framework > span:not(:nth-child(2)) {
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content-section-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.content-section-title > h2 {
|
||||
text-align: center;
|
||||
font-size: 26pt;
|
||||
color: #39547a;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.content-section-title > table {
|
||||
text-align: left;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-title > table tr {
|
||||
margin: 10px;
|
||||
}
|
||||
.content-section-title > table td {
|
||||
line-height: 18pt;
|
||||
}
|
||||
.content-section-title > table td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
vertical-align: top;
|
||||
}
|
||||
.content-section-title > table td:first-child span {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.content-section-title > table td:last-child span {
|
||||
text-align: left;
|
||||
color: #36befd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-section-content {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-content .os-host,
|
||||
.content-section-content .os-host-textarea {
|
||||
border: 2px solid #36befd;
|
||||
width: 480px;
|
||||
max-height: 300px;
|
||||
margin: 10px auto 20px auto;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
line-height: 16pt;
|
||||
}
|
||||
.content-section-content > .os-host .os-host,
|
||||
.content-section-content > .os-host-textarea .os-host-textarea {
|
||||
border: 2px solid #6461f6;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.content-section-content .bonus-content {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
background: #f0f3f6;
|
||||
padding: 0px 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid #dde3ed;
|
||||
font-size: 10pt;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
color: #39547a;
|
||||
}
|
||||
.content-section-content-buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.info-span {
|
||||
background: #f7f7f7;
|
||||
padding: 2px 5px;
|
||||
margin: 2px;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dedfe0;
|
||||
font-weight: bold;
|
||||
font-size: 10pt;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: #36befd;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
|
||||
padding: 0px 1px;
|
||||
font-weight: 600;
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 0%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
z-index: -1;
|
||||
border-bottom: 1px dotted #36befd;
|
||||
transition: height 0.3s, border 0.3s, background-color 0.15s;
|
||||
}
|
||||
a:hover:before {
|
||||
height: 100%;
|
||||
background: #36befd;
|
||||
border-bottom: 1px solid #36befd;
|
||||
}
|
||||
.buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
button {
|
||||
font-size: 10pt;
|
||||
line-height: 28pt;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
color: #555e6b;
|
||||
line-height: 40px;
|
||||
border: 1px solid #d6d6d6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background-color 0.3s, border-color 0.3s,
|
||||
box-shadow 0.3s;
|
||||
padding: 0px 14px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
min-width: 80px;
|
||||
outline: none !important;
|
||||
}
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
border-color: #6461f6;
|
||||
box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
|
||||
}
|
||||
button:active {
|
||||
box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
img {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.os-logo {
|
||||
background: transparent url("../assets/overlayscrollbars.svg") no-repeat
|
||||
center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.framework-logo {
|
||||
background: transparent url("../assets/angular.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.custom-class-name-test {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
<div class="header">
|
||||
<code>
|
||||
<span class="code-keyword">import</span>
|
||||
<span class="code-char">{{ " { " }}</span>
|
||||
<span class="code-variable">OverlayScrollbarsComponent</span>
|
||||
<span class="code-char">{{ " } " }}</span>
|
||||
<span class="code-keyword">from</span>
|
||||
<span class="code-string">{{ " 'overlayscrollbars-ngx'" }}</span>
|
||||
<span class="code-char">;</span>
|
||||
</code>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-section skew">
|
||||
<div class="content-section-content content-section-content-framework">
|
||||
<span class="framework-logo"></span>
|
||||
<span>+</span>
|
||||
<span class="os-logo"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="content-section-title">
|
||||
<h2>Component</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Class:</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ componentClass }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Description:</span>
|
||||
</td>
|
||||
<td>OverlayScrollbars as a {{ framework }}-Component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content-section-content">
|
||||
<overlay-scrollbars
|
||||
#osComponentRef1
|
||||
[options]="osComponentOptions"
|
||||
[ngStyle]="{ maxHeight: '350px' }"
|
||||
[ngClass]="[framework, hasCustomClassName ? customClassName : '']"
|
||||
>
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumShort }}
|
||||
<overlay-scrollbars
|
||||
#osComponentRef2
|
||||
[options]="osComponentOptions"
|
||||
[ngStyle]="{ maxHeight: '150px' }"
|
||||
[ngClass]="[hasCustomClassName ? customClassName : '']"
|
||||
>
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumLong }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumShort }}
|
||||
</overlay-scrollbars>
|
||||
{{ loremIpsumMedium }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumShort }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumLong }}
|
||||
<div *ngFor="let item of loremList; let i = index" [attr.data-key]="i">
|
||||
<br />
|
||||
{{ item }}
|
||||
</div>
|
||||
</overlay-scrollbars>
|
||||
|
||||
<div class="buttons">
|
||||
<button
|
||||
(click)="
|
||||
onBtnScrollRandom($event, [osComponentRef1, osComponentRef2])
|
||||
"
|
||||
>
|
||||
Scroll
|
||||
</button>
|
||||
<button (click)="onBtnChangeOptions()">Change Options</button>
|
||||
<button (click)="onBtnChangeContent()">Change Content</button>
|
||||
<button (click)="onBtnLog()">Log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'example app is running!'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,109 +0,0 @@
|
||||
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
})
|
||||
export class AppComponent {
|
||||
framework: string = 'Angular';
|
||||
customClassName: string = 'custom-class-name-test';
|
||||
componentClass: string = 'OverlayScrollbarsComponent';
|
||||
loremIpsumLong: string =
|
||||
'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: string =
|
||||
'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: string =
|
||||
'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
|
||||
loremList: Array<string> = [];
|
||||
hasCustomClassName: boolean = false;
|
||||
componentContent: string = 'Lorem Ipsum';
|
||||
osComponentOptions: OverlayScrollbars.Options = {
|
||||
resize: 'both',
|
||||
paddingAbsolute: true,
|
||||
scrollbars: {
|
||||
autoHide: 'never',
|
||||
},
|
||||
};
|
||||
@ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
|
||||
osComponentRef1: OverlayScrollbarsComponent;
|
||||
@ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
|
||||
osComponentRef2: OverlayScrollbarsComponent;
|
||||
|
||||
ngAfterViewInit() {
|
||||
console.log(`${this.componentClass} (1)`);
|
||||
console.log(this.osComponentRef1);
|
||||
|
||||
console.log(`${this.componentClass} (2)`);
|
||||
console.log(this.osComponentRef2);
|
||||
}
|
||||
|
||||
onBtnScrollRandom(
|
||||
event: any,
|
||||
refArray: ReadonlyArray<OverlayScrollbarsComponent>
|
||||
) {
|
||||
if (refArray) {
|
||||
for (let i = 0; i < refArray.length; i++) {
|
||||
if (refArray[i]) {
|
||||
const osInstance = refArray[i].osInstance();
|
||||
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'
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onBtnChangeOptions() {
|
||||
this.hasCustomClassName = !this.hasCustomClassName;
|
||||
this.osComponentOptions = {
|
||||
resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
|
||||
scrollbars: {
|
||||
autoHide:
|
||||
this.osComponentOptions.scrollbars.autoHide === 'never'
|
||||
? 'scroll'
|
||||
: 'never',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
onBtnChangeContent() {
|
||||
this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
|
||||
this.loremList.push(this.randomIpsum());
|
||||
}
|
||||
|
||||
onBtnLog() {
|
||||
console.log(`== ${this.componentClass} (1) ==`);
|
||||
console.log('Ref:');
|
||||
console.log(this.osComponentRef1);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef1.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef1.osTarget());
|
||||
console.log('');
|
||||
console.log(`== ${this.componentClass} (2) ==`);
|
||||
console.log('Ref:');
|
||||
console.log(this.osComponentRef2);
|
||||
console.log('Instance:');
|
||||
console.log(this.osComponentRef2.osInstance());
|
||||
console.log('Target:');
|
||||
console.log(this.osComponentRef2.osTarget());
|
||||
}
|
||||
|
||||
randomIpsum(): string {
|
||||
const loremIpsums = [
|
||||
this.loremIpsumLong,
|
||||
this.loremIpsumMedium,
|
||||
this.loremIpsumShort,
|
||||
];
|
||||
const random = Math.floor(Math.random() * loremIpsums.length);
|
||||
return loremIpsums[random];
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, OverlayscrollbarsModule],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,20 +0,0 @@
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic()
|
||||
.bootstrapModule(AppModule)
|
||||
.catch((err) => console.error(err));
|
||||
|
||||
OverlayScrollbars(document.body, {
|
||||
nativeScrollbarsOverlaid: {
|
||||
initialize: false,
|
||||
},
|
||||
});
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
@@ -1,14 +0,0 @@
|
||||
@import "~overlayscrollbars/css/OverlayScrollbars.css";
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 11pt;
|
||||
color: #31485b;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
@@ -1,10 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": ["src/main.ts", "src/polyfills.ts"],
|
||||
"include": ["src/**/*.d.ts"]
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"module": "es2020",
|
||||
"lib": ["es2018", "dom"]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"strictInputAccessModifiers": true
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": ["jasmine"]
|
||||
},
|
||||
"files": ["src/test.ts", "src/polyfills.ts"],
|
||||
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"align": {
|
||||
"options": [
|
||||
"parameters",
|
||||
"statements"
|
||||
]
|
||||
},
|
||||
"array-type": false,
|
||||
"arrow-return-shorthand": true,
|
||||
"curly": true,
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": {
|
||||
"options": [
|
||||
"spaces"
|
||||
]
|
||||
},
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"semicolon": {
|
||||
"options": [
|
||||
"always"
|
||||
]
|
||||
},
|
||||
"space-before-function-paren": {
|
||||
"options": {
|
||||
"anonymous": "never",
|
||||
"asyncArrow": "always",
|
||||
"constructor": "never",
|
||||
"method": "never",
|
||||
"named": "never"
|
||||
}
|
||||
},
|
||||
"typedef": [
|
||||
true,
|
||||
"call-signature"
|
||||
],
|
||||
"typedef-whitespace": {
|
||||
"options": [
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
},
|
||||
{
|
||||
"call-signature": "onespace",
|
||||
"index-signature": "onespace",
|
||||
"parameter": "onespace",
|
||||
"property-declaration": "onespace",
|
||||
"variable-declaration": "onespace"
|
||||
}
|
||||
]
|
||||
},
|
||||
"variable-name": {
|
||||
"options": [
|
||||
"ban-keywords",
|
||||
"check-format",
|
||||
"allow-pascal-case"
|
||||
]
|
||||
},
|
||||
"whitespace": {
|
||||
"options": [
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-typecast"
|
||||
]
|
||||
},
|
||||
"component-class-suffix": true,
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-conflicting-lifecycle": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-output-native": true,
|
||||
"no-output-on-prefix": true,
|
||||
"no-output-rename": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"template-banana-in-box": true,
|
||||
"template-no-negated-async": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"app",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"app",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
-4397
File diff suppressed because it is too large
Load Diff
@@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "overlayscrollbars-ngx",
|
||||
"version": "0.2.3",
|
||||
"description": "OverlayScrollbars wrapper for Angular.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"ngx",
|
||||
"angular"
|
||||
],
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "./dist/overlayscrollbars-ngx.js",
|
||||
"module": "./dist/overlayscrollbars-ngx.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@angular/compiler": ">=7.0.0",
|
||||
"@angular/compiler-cli": ">=7.0.0",
|
||||
"@angular/core": ">=7.0.0",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.4",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"rxjs": "^6.5.4",
|
||||
"shelljs": "0.7.7",
|
||||
"tsickle": "^0.34.0",
|
||||
"typescript": "3.1.6",
|
||||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": ">=7.0.0",
|
||||
"overlayscrollbars": "^1.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"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/\"",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
@Component({
|
||||
selector: 'overlay-scrollbars', //https://angular.io/guide/styleguide#component-selectors
|
||||
host: { 'class': 'os-host' },
|
||||
template: `
|
||||
<div class="os-resize-observer-host"></div>
|
||||
<div class="os-padding">
|
||||
<div class="os-viewport">
|
||||
<div class="os-content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-horizontal ">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-vertical">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar-corner"></div>
|
||||
`,
|
||||
styles: [':host { display: block; }']
|
||||
})
|
||||
export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
|
||||
@Input('options') _options: OverlayScrollbars.Options;
|
||||
@Input('extensions') _extensions: OverlayScrollbars.Extensions;
|
||||
private _osInstance: OverlayScrollbars | null = null;
|
||||
private _osTargetRef: ElementRef;
|
||||
|
||||
constructor(_osTargetRef: ElementRef, private ngZone: NgZone) {
|
||||
this._osTargetRef = _osTargetRef;
|
||||
}
|
||||
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return this._osInstance;
|
||||
}
|
||||
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return this._osTargetRef.nativeElement || null;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.destroy();
|
||||
this._osInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
const optionsChange = changes._options;
|
||||
if (optionsChange && OverlayScrollbars.valid(this._osInstance)) {
|
||||
this._osInstance.options(optionsChange.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,123 +0,0 @@
|
||||
<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-%3E=16.4.0-61dafb?style=flat-square&logo=React" alt="React"></a>
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars"><img src="https://img.shields.io/badge/OverlayScrollbars-%5E1.10.0-36befd?style=flat-square" 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>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<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
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
-12644
File diff suppressed because it is too large
Load Diff
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "/OverlayScrollbars/frameworks/react/",
|
||||
"dependencies": {
|
||||
"@types/jest": "24.0.15",
|
||||
"@types/node": "12.6.8",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"overlayscrollbars-react": "^0.1.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "3.0.1",
|
||||
"typescript": ">=3.2.1 <3.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
-3928
File diff suppressed because it is too large
Load Diff
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "overlayscrollbars-react",
|
||||
"version": "0.3.0",
|
||||
"description": "OverlayScrollbars wrapper for React.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"react"
|
||||
],
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "./dist/overlayscrollbars-react.js",
|
||||
"module": "./dist/overlayscrollbars-react.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-json-editor": "^2.5.4",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"react": "^18.0.0",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.22.0",
|
||||
"shelljs": "^0.8.3",
|
||||
"typescript": "^3.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.4.0 || ^17.0.0 || ^18.0.0",
|
||||
"overlayscrollbars": "^1.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"plugins": [["@vue/babel-plugin-jsx"]]
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
<p align="center">
|
||||
<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">
|
||||
<a href="https://github.com/vuejs/vue"><img src="https://img.shields.io/badge/Vue-%5E3.0.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.10.0-36befd?style=flat-square" 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>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!documentation">Documentation</a>
|
||||
•
|
||||
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
|
||||
</h3>
|
||||
<h5 align="center">
|
||||
The official OverlayScrollbars wrapper for Vue3.
|
||||
</h5>
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
npm install overlayscrollbars-vue
|
||||
```
|
||||
|
||||
## Peer Dependencies
|
||||
|
||||
OverlayScrollbars for Vue has the following **peer dependencies**:
|
||||
|
||||
- The vanilla JavaScript library: [overlayscrollbars](https://www.npmjs.com/package/overlayscrollbars)
|
||||
|
||||
```
|
||||
npm install overlayscrollbars
|
||||
```
|
||||
|
||||
- The Vue framework: [vue](https://www.npmjs.com/package/vue)
|
||||
|
||||
```
|
||||
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 @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 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 [app.component](https://vuejs.org/api/application.html#app-component) method you can register the wrapper globally:
|
||||
|
||||
```js
|
||||
import { createApp } from "vue";
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
|
||||
|
||||
const app = createApp({});
|
||||
app.component("OverlayScrollbars", OverlayScrollbarsComponent);
|
||||
```
|
||||
|
||||
In case you wanna register the Component [locally](https://vuejs.org/api/options-misc.html#components), you can simply import it and do whatever you want with it:
|
||||
|
||||
```js
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
OverlayScrollbars: OverlayScrollbarsComponent,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Template
|
||||
|
||||
After the registration you can use it in templates like:
|
||||
|
||||
```html
|
||||
<!-- PascalCase -->
|
||||
<OverlayScrollbars>example content</OverlayScrollbars>
|
||||
<!-- kebab-case -->
|
||||
<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.
|
||||
|
||||
```vue
|
||||
<OverlayScrollbars
|
||||
:options="{ scrollbars: { autoHide: 'scroll' } }"
|
||||
:extensions="['extensionA', 'extensionB']"
|
||||
>
|
||||
</OverlayScrollbars>
|
||||
```
|
||||
|
||||
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/vue/)
|
||||
- [Source code](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue/example)
|
||||
|
||||
If you wanna build the example app, run these commands:
|
||||
|
||||
```sh
|
||||
npm run setup
|
||||
npm run build
|
||||
npm run example
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -1,183 +0,0 @@
|
||||
const packageName = "overlayscrollbars-vue";
|
||||
const rollupUmdName = "OverlayScrollbarsVue";
|
||||
const filesInfo = {
|
||||
fileName: packageName,
|
||||
srcFolder: "./src",
|
||||
distFolder: "./dist",
|
||||
typingsFolder: "./dist/types",
|
||||
exampleFolder: "./example",
|
||||
tsconfigJsonPath: "./tsconfig.json",
|
||||
packageJsonPath: "./package.json",
|
||||
cache: [],
|
||||
};
|
||||
const packagePaths = {
|
||||
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
|
||||
module: `${filesInfo.distFolder}/${filesInfo.fileName}.esm.js`,
|
||||
typings: `${filesInfo.typingsFolder}/index.d.ts`,
|
||||
};
|
||||
const rollupUmdGlobals = {
|
||||
vue: "Vue",
|
||||
overlayscrollbars: "OverlayScrollbars",
|
||||
};
|
||||
const extensions = [".ts", ".js", ".tsx"];
|
||||
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");
|
||||
const rollup = require("rollup");
|
||||
const rollupCommonJs = require("rollup-plugin-commonjs");
|
||||
const rollupTypeScript = require("rollup-plugin-typescript2");
|
||||
const rollupResolve = require("rollup-plugin-node-resolve");
|
||||
const { babel } = require("@rollup/plugin-babel");
|
||||
const rollupInputConfig = {
|
||||
input: `${filesInfo.srcFolder}/index.ts`,
|
||||
external: [
|
||||
"vite",
|
||||
"vue/compiler-sfc",
|
||||
"@vue/compiler-sfc",
|
||||
...Object.keys(packageJson.devDependencies),
|
||||
...Object.keys(packageJson.peerDependencies),
|
||||
],
|
||||
plugins: [
|
||||
rollupResolve(),
|
||||
rollupCommonJs(),
|
||||
babel({ babelHelpers: "bundled", extensions }),
|
||||
],
|
||||
};
|
||||
const rollupOutputConfig = {
|
||||
exports: "named",
|
||||
sourcemap: true,
|
||||
};
|
||||
|
||||
sh.echo(chalk.cyanBright("Start building:"));
|
||||
|
||||
gulp.task("prepare", function (done) {
|
||||
sh.echo(`> Removing ${filesInfo.distFolder}`);
|
||||
sh.rm("-rf", filesInfo.distFolder);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task("tsconfigJson", function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
|
||||
let newTsconfigJson = {
|
||||
...tsconfigJson,
|
||||
compilerOptions: {
|
||||
...tsconfigJson.compilerOptions,
|
||||
declarationDir: filesInfo.typingsFolder,
|
||||
outDir: filesInfo.distFolder,
|
||||
},
|
||||
include: [filesInfo.srcFolder],
|
||||
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, "node_modules"],
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(
|
||||
filesInfo.tsconfigJsonPath
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task("packageJson", function (done) {
|
||||
sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
|
||||
let newPackageJson = {
|
||||
...packageJson,
|
||||
...packagePaths,
|
||||
name: packageName,
|
||||
files: [
|
||||
path.normalize(filesInfo.srcFolder),
|
||||
path.normalize(filesInfo.distFolder),
|
||||
],
|
||||
};
|
||||
sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(
|
||||
filesInfo.packageJsonPath
|
||||
);
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.task("rollup", function (done) {
|
||||
sh.echo("> Rollup:");
|
||||
(async function () {
|
||||
let rollupTsconfig = {
|
||||
useTsconfigDeclarationDir: true,
|
||||
objectHashIgnoreUnknownHack: true,
|
||||
clean: true,
|
||||
tsconfig: filesInfo.tsconfigJsonPath,
|
||||
tsconfigOverride: {
|
||||
compilerOptions: {
|
||||
target: "es5",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = "es5";
|
||||
let es5umdBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(
|
||||
rollupInputConfig.plugins
|
||||
),
|
||||
});
|
||||
await es5umdBundle.write({
|
||||
name: rollupUmdName,
|
||||
globals: rollupUmdGlobals,
|
||||
file: packagePaths.main,
|
||||
format: "umd",
|
||||
...rollupOutputConfig,
|
||||
});
|
||||
sh.echo(
|
||||
chalk.yellowBright(
|
||||
` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & umd]: `
|
||||
) + chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.main}`)
|
||||
);
|
||||
|
||||
rollupTsconfig.tsconfigOverride.compilerOptions.target = "es6";
|
||||
let es6esmBundle = await rollup.rollup({
|
||||
...rollupInputConfig,
|
||||
plugins: [rollupTypeScript({ ...rollupTsconfig })].concat(
|
||||
rollupInputConfig.plugins
|
||||
),
|
||||
});
|
||||
await es6esmBundle.write({
|
||||
file: packagePaths.module,
|
||||
format: "esm",
|
||||
...rollupOutputConfig,
|
||||
});
|
||||
sh.echo(
|
||||
chalk.yellowBright(
|
||||
` [${rollupTsconfig.tsconfigOverride.compilerOptions.target} & esm]: `
|
||||
) +
|
||||
chalk.greenBright(`${rollupInputConfig.input} → ${packagePaths.module}`)
|
||||
);
|
||||
|
||||
filesInfo.cache.forEach(function (cacheFolder) {
|
||||
if (sh.test("-d", cacheFolder)) {
|
||||
sh.rm("-rf", cacheFolder);
|
||||
}
|
||||
});
|
||||
|
||||
sh.echo(chalk.greenBright("Building finished!"));
|
||||
done();
|
||||
})();
|
||||
});
|
||||
|
||||
gulp.task("example", function (done) {
|
||||
sh.echo();
|
||||
sh.echo(
|
||||
chalk.cyanBright(
|
||||
`Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`
|
||||
)
|
||||
);
|
||||
sh.mkdir(
|
||||
"-p",
|
||||
`${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`
|
||||
);
|
||||
sh.cp(
|
||||
"-Rf",
|
||||
[filesInfo.srcFolder, filesInfo.distFolder, filesInfo.packageJsonPath],
|
||||
`${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`
|
||||
);
|
||||
sh.echo(chalk.greenBright("Copying finished!"));
|
||||
done();
|
||||
});
|
||||
|
||||
gulp.series("prepare", "tsconfigJson", "packageJson", "rollup", "example")();
|
||||
@@ -1,84 +0,0 @@
|
||||
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createVNode } from 'vue';
|
||||
import OverlayScrollbars from 'overlayscrollbars';
|
||||
|
||||
var OverlayScrollbarsComponent = defineComponent({
|
||||
name: "OverlayScrollbars",
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
setup(props, {
|
||||
slots,
|
||||
expose
|
||||
}) {
|
||||
const osInstance = ref(null);
|
||||
const osTargetRef = ref();
|
||||
expose({
|
||||
osInstance() {
|
||||
return osInstance.value;
|
||||
},
|
||||
|
||||
osTarget() {
|
||||
return this.$el || null;
|
||||
}
|
||||
|
||||
});
|
||||
watch(() => props.options, (currOptions, oldOptions) => {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.options(currOptions);
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
osInstance.value = OverlayScrollbars(osTargetRef.value, props.options || {}, props.extensions);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.destroy();
|
||||
osInstance.value = null;
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
var _a;
|
||||
|
||||
return createVNode("div", {
|
||||
"ref": osTargetRef,
|
||||
"class": "os-host"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-resize-observer-host"
|
||||
}, null), createVNode("div", {
|
||||
"class": "os-padding"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-viewport"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-content"
|
||||
}, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])])]), createVNode("div", {
|
||||
"class": "os-scrollbar os-scrollbar-horizontal"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-scrollbar-track"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-scrollbar-handle"
|
||||
}, null)])]), createVNode("div", {
|
||||
"class": "os-scrollbar os-scrollbar-vertical"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-scrollbar-track"
|
||||
}, [createVNode("div", {
|
||||
"class": "os-scrollbar-handle"
|
||||
}, null)])]), createVNode("div", {
|
||||
"class": "os-scrollbar-corner"
|
||||
}, null)]);
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
export { OverlayScrollbarsComponent };
|
||||
//# sourceMappingURL=overlayscrollbars-vue.esm.js.map
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"overlayscrollbars-vue.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import {\r\n onMounted,\r\n onBeforeUnmount,\r\n watch,\r\n defineComponent,\r\n ref,\r\n PropType,\r\n} from \"vue\";\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport default defineComponent({\r\n name: \"OverlayScrollbars\",\r\n\r\n props: {\r\n options: {\r\n type: Object as PropType<OverlayScrollbars.Options>,\r\n },\r\n extensions: {\r\n type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>,\r\n },\r\n },\r\n\r\n data() {\r\n return {};\r\n },\r\n\r\n setup(props, { slots, expose }) {\r\n const osInstance = ref<OverlayScrollbars | null>(null);\r\n const osTargetRef = ref<HTMLDivElement>();\r\n\r\n expose({\r\n osInstance(): OverlayScrollbars | null {\r\n return osInstance.value;\r\n },\r\n osTarget(): HTMLDivElement | null {\r\n return (this.$el as HTMLDivElement) || null;\r\n },\r\n });\r\n\r\n watch(\r\n () => props.options,\r\n (\r\n currOptions: OverlayScrollbars.Options,\r\n oldOptions: OverlayScrollbars.Options\r\n ) => {\r\n if (OverlayScrollbars.valid(osInstance.value)) {\r\n osInstance.value.options(currOptions);\r\n }\r\n }\r\n );\r\n\r\n onMounted(() => {\r\n osInstance.value = OverlayScrollbars(\r\n osTargetRef.value,\r\n props.options || {},\r\n props.extensions\r\n );\r\n });\r\n\r\n onBeforeUnmount(() => {\r\n if (OverlayScrollbars.valid(osInstance.value)) {\r\n osInstance.value.destroy();\r\n osInstance.value = null;\r\n }\r\n });\r\n\r\n return () => (\r\n <div ref={osTargetRef} class=\"os-host\">\r\n <div class=\"os-resize-observer-host\"></div>\r\n <div class=\"os-padding\">\r\n <div class=\"os-viewport\">\r\n <div class=\"os-content\">{slots.default?.()}</div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar os-scrollbar-horizontal\">\r\n <div class=\"os-scrollbar-track\">\r\n <div class=\"os-scrollbar-handle\"></div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar os-scrollbar-vertical\">\r\n <div class=\"os-scrollbar-track\">\r\n <div class=\"os-scrollbar-handle\"></div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar-corner\"></div>\r\n </div>\r\n );\r\n },\r\n});\r\n"],"names":["defineComponent","name","props","options","type","Object","extensions","String","Array","data","setup","slots","expose","osInstance","ref","osTargetRef","value","osTarget","$el","watch","currOptions","oldOptions","OverlayScrollbars","valid","onMounted","onBeforeUnmount","destroy","default"],"mappings":";;;AAUA,iCAAeA,eAAe,CAAC;EAC7BC,IAAI,EAAE,mBADuB;EAG7BC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;KAFH;IAILC,UAAU,EAAE;MACVF,IAAI,EAAE,CAACG,MAAD,EAASC,KAAT,EAAgBH,MAAhB;;GARmB;;EAY7BI,IAAI;IACF,OAAO,EAAP;GAb2B;;EAgB7BC,KAAK,CAACR,KAAD,EAAQ;IAAES,KAAF;IAASC;GAAjB;IACH,MAAMC,UAAU,GAAGC,GAAG,CAA2B,IAA3B,CAAtB;IACA,MAAMC,WAAW,GAAGD,GAAG,EAAvB;IAEAF,MAAM,CAAC;MACLC,UAAU;QACR,OAAOA,UAAU,CAACG,KAAlB;OAFG;;MAILC,QAAQ;QACN,OAAQ,KAAKC,GAAL,IAA+B,IAAvC;;;KALE,CAAN;IASAC,KAAK,CACH,MAAMjB,KAAK,CAACC,OADT,EAEH,CACEiB,WADF,EAEEC,UAFF;MAIE,IAAIC,iBAAiB,CAACC,KAAlB,CAAwBV,UAAU,CAACG,KAAnC,CAAJ,EAA+C;QAC7CH,UAAU,CAACG,KAAX,CAAiBb,OAAjB,CAAyBiB,WAAzB;;KAPD,CAAL;IAYAI,SAAS,CAAC;MACRX,UAAU,CAACG,KAAX,GAAmBM,iBAAiB,CAClCP,WAAW,CAACC,KADsB,EAElCd,KAAK,CAACC,OAAN,IAAiB,EAFiB,EAGlCD,KAAK,CAACI,UAH4B,CAApC;KADO,CAAT;IAQAmB,eAAe,CAAC;MACd,IAAIH,iBAAiB,CAACC,KAAlB,CAAwBV,UAAU,CAACG,KAAnC,CAAJ,EAA+C;QAC7CH,UAAU,CAACG,KAAX,CAAiBU,OAAjB;QACAb,UAAU,CAACG,KAAX,GAAmB,IAAnB;;KAHW,CAAf;IAOA,OAAO;;;MAAM;QAAA,OACDD,WADC;QAAA,SACkB;;QADlB,SAEE;;QAFF,SAGE;;QAHF,SAII;;QAJJ,SAKM;UAAc,MAAAJ,KAAK,CAACgB,OAAN,UAAA,iBAAA,SAAA,iBALpB;QAAA,SAQE;;QARF,SASI;;QATJ,SAUM;;QAVN,SAaE;;QAbF,SAcI;;QAdJ,SAeM;;QAfN,SAkBE;;KAlBf;;;AAxD2B,CAAD,CAA9B;;;;"}
|
||||
@@ -1,89 +0,0 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('overlayscrollbars')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'overlayscrollbars'], factory) :
|
||||
(global = global || self, factory(global.OverlayScrollbarsVue = {}, global.Vue, global.OverlayScrollbars));
|
||||
}(this, (function (exports, vue, OverlayScrollbars) { 'use strict';
|
||||
|
||||
OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
|
||||
|
||||
var OverlayScrollbarsComponent = vue.defineComponent({
|
||||
name: "OverlayScrollbars",
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object]
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {};
|
||||
},
|
||||
setup: function (props, _a) {
|
||||
var slots = _a.slots,
|
||||
expose = _a.expose;
|
||||
var osInstance = vue.ref(null);
|
||||
var osTargetRef = vue.ref();
|
||||
expose({
|
||||
osInstance: function () {
|
||||
return osInstance.value;
|
||||
},
|
||||
osTarget: function () {
|
||||
return this.$el || null;
|
||||
}
|
||||
});
|
||||
vue.watch(function () {
|
||||
return props.options;
|
||||
}, function (currOptions, oldOptions) {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.options(currOptions);
|
||||
}
|
||||
});
|
||||
vue.onMounted(function () {
|
||||
osInstance.value = OverlayScrollbars(osTargetRef.value, props.options || {}, props.extensions);
|
||||
});
|
||||
vue.onBeforeUnmount(function () {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.destroy();
|
||||
osInstance.value = null;
|
||||
}
|
||||
});
|
||||
return function () {
|
||||
var _a;
|
||||
|
||||
return vue.createVNode("div", {
|
||||
"ref": osTargetRef,
|
||||
"class": "os-host"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-resize-observer-host"
|
||||
}, null), vue.createVNode("div", {
|
||||
"class": "os-padding"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-viewport"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-content"
|
||||
}, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])])]), vue.createVNode("div", {
|
||||
"class": "os-scrollbar os-scrollbar-horizontal"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-scrollbar-track"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-scrollbar-handle"
|
||||
}, null)])]), vue.createVNode("div", {
|
||||
"class": "os-scrollbar os-scrollbar-vertical"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-scrollbar-track"
|
||||
}, [vue.createVNode("div", {
|
||||
"class": "os-scrollbar-handle"
|
||||
}, null)])]), vue.createVNode("div", {
|
||||
"class": "os-scrollbar-corner"
|
||||
}, null)]);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=overlayscrollbars-vue.js.map
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"overlayscrollbars-vue.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import {\r\n onMounted,\r\n onBeforeUnmount,\r\n watch,\r\n defineComponent,\r\n ref,\r\n PropType,\r\n} from \"vue\";\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport default defineComponent({\r\n name: \"OverlayScrollbars\",\r\n\r\n props: {\r\n options: {\r\n type: Object as PropType<OverlayScrollbars.Options>,\r\n },\r\n extensions: {\r\n type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>,\r\n },\r\n },\r\n\r\n data() {\r\n return {};\r\n },\r\n\r\n setup(props, { slots, expose }) {\r\n const osInstance = ref<OverlayScrollbars | null>(null);\r\n const osTargetRef = ref<HTMLDivElement>();\r\n\r\n expose({\r\n osInstance(): OverlayScrollbars | null {\r\n return osInstance.value;\r\n },\r\n osTarget(): HTMLDivElement | null {\r\n return (this.$el as HTMLDivElement) || null;\r\n },\r\n });\r\n\r\n watch(\r\n () => props.options,\r\n (\r\n currOptions: OverlayScrollbars.Options,\r\n oldOptions: OverlayScrollbars.Options\r\n ) => {\r\n if (OverlayScrollbars.valid(osInstance.value)) {\r\n osInstance.value.options(currOptions);\r\n }\r\n }\r\n );\r\n\r\n onMounted(() => {\r\n osInstance.value = OverlayScrollbars(\r\n osTargetRef.value,\r\n props.options || {},\r\n props.extensions\r\n );\r\n });\r\n\r\n onBeforeUnmount(() => {\r\n if (OverlayScrollbars.valid(osInstance.value)) {\r\n osInstance.value.destroy();\r\n osInstance.value = null;\r\n }\r\n });\r\n\r\n return () => (\r\n <div ref={osTargetRef} class=\"os-host\">\r\n <div class=\"os-resize-observer-host\"></div>\r\n <div class=\"os-padding\">\r\n <div class=\"os-viewport\">\r\n <div class=\"os-content\">{slots.default?.()}</div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar os-scrollbar-horizontal\">\r\n <div class=\"os-scrollbar-track\">\r\n <div class=\"os-scrollbar-handle\"></div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar os-scrollbar-vertical\">\r\n <div class=\"os-scrollbar-track\">\r\n <div class=\"os-scrollbar-handle\"></div>\r\n </div>\r\n </div>\r\n <div class=\"os-scrollbar-corner\"></div>\r\n </div>\r\n );\r\n },\r\n});\r\n"],"names":["defineComponent","name","props","options","type","Object","extensions","String","Array","data","setup","_a","slots","expose","osInstance","ref","osTargetRef","value","osTarget","$el","watch","currOptions","oldOptions","OverlayScrollbars","valid","onMounted","onBeforeUnmount","destroy","default"],"mappings":";;;;;;;;AAUA,mCAAeA,mBAAe,CAAC;IAC7BC,IAAI,EAAE,mBADuB;IAG7BC,KAAK,EAAE;MACLC,OAAO,EAAE;QACPC,IAAI,EAAEC;OAFH;MAILC,UAAU,EAAE;QACVF,IAAI,EAAE,CAACG,MAAD,EAASC,KAAT,EAAgBH,MAAhB;;KARmB;IAY7BI,IAAI;MACF,OAAO,EAAP;KAb2B;IAgB7BC,KAAK,EAAL,UAAMR,KAAN,EAAaS,EAAb;UAAeC,KAAK;UAAEC,MAAM;MAC1B,IAAMC,UAAU,GAAGC,OAAG,CAA2B,IAA3B,CAAtB;MACA,IAAMC,WAAW,GAAGD,OAAG,EAAvB;MAEAF,MAAM,CAAC;QACLC,UAAU,EAAV;UACE,OAAOA,UAAU,CAACG,KAAlB;SAFG;QAILC,QAAQ,EAAR;UACE,OAAQ,KAAKC,GAAL,IAA+B,IAAvC;;OALE,CAAN;MASAC,SAAK,CACH;QAAM,OAAAlB,KAAK,CAACC,OAAN;OADH,EAEH,UACEkB,WADF,EAEEC,UAFF;QAIE,IAAIC,iBAAiB,CAACC,KAAlB,CAAwBV,UAAU,CAACG,KAAnC,CAAJ,EAA+C;UAC7CH,UAAU,CAACG,KAAX,CAAiBd,OAAjB,CAAyBkB,WAAzB;;OAPD,CAAL;MAYAI,aAAS,CAAC;QACRX,UAAU,CAACG,KAAX,GAAmBM,iBAAiB,CAClCP,WAAW,CAACC,KADsB,EAElCf,KAAK,CAACC,OAAN,IAAiB,EAFiB,EAGlCD,KAAK,CAACI,UAH4B,CAApC;OADO,CAAT;MAQAoB,mBAAe,CAAC;QACd,IAAIH,iBAAiB,CAACC,KAAlB,CAAwBV,UAAU,CAACG,KAAnC,CAAJ,EAA+C;UAC7CH,UAAU,CAACG,KAAX,CAAiBU,OAAjB;UACAb,UAAU,CAACG,KAAX,GAAmB,IAAnB;;OAHW,CAAf;MAOA,OAAO;;;QAAM;UAAA,OACDD,WADC;UAAA,SACkB;;UADlB,SAEE;;UAFF,SAGE;;UAHF,SAII;;UAJJ,SAKM;YAAc,MAAAJ,KAAK,CAACgB,OAAN,UAAA,iBAAA,SAAA,iBALpB;UAAA,SAQE;;UARF,SASI;;UATJ,SAUM;;UAVN,SAaE;;UAbF,SAcI;;UAdJ,SAeM;;UAfN,SAkBE;;OAlBf;;EAxD2B,CAAD,CAA9B;;;;;;;;;;;;"}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { PropType } from "vue";
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
options: {
|
||||
type: PropType<OverlayScrollbars.Options>;
|
||||
};
|
||||
extensions: {
|
||||
type: PropType<OverlayScrollbars.Extensions>;
|
||||
};
|
||||
}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
options: {
|
||||
type: PropType<OverlayScrollbars.Options>;
|
||||
};
|
||||
extensions: {
|
||||
type: PropType<OverlayScrollbars.Extensions>;
|
||||
};
|
||||
}>>, {}>;
|
||||
export default _default;
|
||||
@@ -1 +0,0 @@
|
||||
export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
|
||||
@@ -1,15 +0,0 @@
|
||||
/* eslint-env node */
|
||||
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||
|
||||
module.exports = {
|
||||
"root": true,
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/eslint-config-typescript/recommended",
|
||||
"@vue/eslint-config-prettier"
|
||||
],
|
||||
"env": {
|
||||
"vue/setup-compiler-macros": true
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,46 +0,0 @@
|
||||
# example
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||
|
||||
1. Disable the built-in TypeScript Extension
|
||||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
-1684
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview --port 5050",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"overlayscrollbars-vue": "^0.1.0",
|
||||
"vue": "^3.2.33"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.1.0",
|
||||
"@types/node": "^16.11.27",
|
||||
"@vitejs/plugin-vue": "^2.3.1",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"@vue/eslint-config-typescript": "^10.0.0",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-plugin-vue": "^8.2.0",
|
||||
"prettier": "^2.5.1",
|
||||
"typescript": "~4.6.3",
|
||||
"vite": "^2.9.5",
|
||||
"vue-tsc": "^0.34.7"
|
||||
}
|
||||
}
|
||||
@@ -1,579 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="header">
|
||||
<code>
|
||||
<span class="code-keyword">import</span>
|
||||
<span class="code-char">{{ " { " }}</span>
|
||||
<span class="code-variable">OverlayScrollbarsComponent</span>
|
||||
<span class="code-char">{{ " } " }}</span>
|
||||
<span class="code-keyword">from</span>
|
||||
<span class="code-string">{{ " 'overlayscrollbars-vue'" }}</span>
|
||||
<span class="code-char">;</span>
|
||||
</code>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-section skew">
|
||||
<div class="content-section-content content-section-content-framework">
|
||||
<span class="framework-logo"></span>
|
||||
<span>+</span>
|
||||
<span class="os-logo"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="content-section-title">
|
||||
<h2>Component</h2>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Class:</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ componentClass }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Description:</span>
|
||||
</td>
|
||||
<td>OverlayScrollbars as a {{ framework }}-Component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content-section-content">
|
||||
<OverlayScrollbars
|
||||
ref="osComponentRef1"
|
||||
:options="osComponentOptions"
|
||||
style="max-height: 350px"
|
||||
:class="[framework, hasCustomClassName ? customClassName : '']"
|
||||
>
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumShort }}
|
||||
<overlay-scrollbars
|
||||
ref="osComponentRef2"
|
||||
:options="osComponentOptions"
|
||||
style="max-height: 150px"
|
||||
:class="hasCustomClassName ? customClassName : ''"
|
||||
>
|
||||
<div class="bonus-content">{{ componentContent }}</div>
|
||||
{{ loremIpsumLong }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumShort }}
|
||||
</overlay-scrollbars>
|
||||
{{ loremIpsumMedium }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumShort }}
|
||||
<br />
|
||||
<br />
|
||||
{{ loremIpsumLong }}
|
||||
<div
|
||||
v-for="(item, index) in loremList"
|
||||
:key="index"
|
||||
:data-key="index"
|
||||
>
|
||||
<br />
|
||||
{{ item }}
|
||||
</div>
|
||||
</OverlayScrollbars>
|
||||
|
||||
<div class="buttons">
|
||||
<button
|
||||
@click="
|
||||
(event) => {
|
||||
this.onBtnScrollRandom.call(this, event, [
|
||||
this.$refs.osComponentRef1,
|
||||
this.$refs.osComponentRef2,
|
||||
]);
|
||||
}
|
||||
"
|
||||
>
|
||||
Scroll
|
||||
</button>
|
||||
<button
|
||||
@click="
|
||||
() => {
|
||||
this.onBtnChangeOptions.call(this);
|
||||
}
|
||||
"
|
||||
>
|
||||
Change Options
|
||||
</button>
|
||||
<button
|
||||
@click="
|
||||
() => {
|
||||
this.onBtnChangeContent.call(this);
|
||||
}
|
||||
"
|
||||
>
|
||||
Change Content
|
||||
</button>
|
||||
<button
|
||||
@click="
|
||||
() => {
|
||||
this.onBtnLog.call(this);
|
||||
}
|
||||
"
|
||||
>
|
||||
Log
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type OverlayScrollbars from "overlayscrollbars";
|
||||
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
|
||||
|
||||
export interface AppData {
|
||||
framework: string;
|
||||
customClassName: string;
|
||||
componentClass: string;
|
||||
loremIpsumLong: string;
|
||||
loremIpsumMedium: string;
|
||||
loremIpsumShort: string;
|
||||
loremList: Array<string>;
|
||||
componentContent: string;
|
||||
osComponentOptions: OverlayScrollbars.Options;
|
||||
hasCustomClassName: boolean;
|
||||
}
|
||||
export interface AppMethods {
|
||||
onBtnScrollRandom(
|
||||
event: MouseEvent,
|
||||
refArray: Array<typeof OverlayScrollbarsComponent>
|
||||
): void;
|
||||
onBtnChangeOptions(): void;
|
||||
onBtnChangeContent(): void;
|
||||
onBtnLog(): void;
|
||||
randomIpsum(): string;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
OverlayScrollbars: OverlayScrollbarsComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
framework: "Vue",
|
||||
customClassName: "custom-class-name-test",
|
||||
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.",
|
||||
hasCustomClassName: false,
|
||||
loremList: [],
|
||||
componentContent: "Lorem Ipsum",
|
||||
osComponentOptions: {
|
||||
resize: "both",
|
||||
paddingAbsolute: true,
|
||||
scrollbars: {
|
||||
autoHide: "never",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onBtnScrollRandom(
|
||||
event: MouseEvent,
|
||||
refArray: Array<typeof OverlayScrollbarsComponent>
|
||||
) {
|
||||
if (refArray) {
|
||||
for (let i = 0; i < refArray.length; i++) {
|
||||
if (refArray[i]) {
|
||||
const osInstance = refArray[i].osInstance();
|
||||
if (osInstance) {
|
||||
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"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onBtnChangeOptions() {
|
||||
this.hasCustomClassName = !this.hasCustomClassName;
|
||||
this.osComponentOptions = {
|
||||
resize: this.osComponentOptions.resize === "both" ? "none" : "both",
|
||||
scrollbars: {
|
||||
autoHide:
|
||||
this.osComponentOptions.scrollbars!.autoHide === "never"
|
||||
? "scroll"
|
||||
: "never",
|
||||
},
|
||||
};
|
||||
},
|
||||
onBtnChangeContent() {
|
||||
this.componentContent =
|
||||
this.componentContent + "\r\n" + this.randomIpsum();
|
||||
this.loremList.push(this.randomIpsum());
|
||||
},
|
||||
onBtnLog() {
|
||||
console.log(`== ${this.componentClass} (1) ==`);
|
||||
console.log("Instance:");
|
||||
console.log(
|
||||
(
|
||||
this.$refs.osComponentRef1 as typeof OverlayScrollbarsComponent
|
||||
).osInstance()
|
||||
);
|
||||
console.log("Target:");
|
||||
console.log(
|
||||
(this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osTarget()
|
||||
);
|
||||
console.log("");
|
||||
console.log(`== ${this.componentClass} (2) ==`);
|
||||
console.log("Instance:");
|
||||
console.log(
|
||||
(this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osInstance()
|
||||
);
|
||||
console.log("Target:");
|
||||
console.log(
|
||||
(this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osTarget()
|
||||
);
|
||||
},
|
||||
randomIpsum() {
|
||||
let loremIpsums = [
|
||||
this.loremIpsumLong,
|
||||
this.loremIpsumMedium,
|
||||
this.loremIpsumShort,
|
||||
];
|
||||
return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(`${this.componentClass} (1)`);
|
||||
console.log(this.$refs.osComponentRef1);
|
||||
|
||||
console.log(`${this.componentClass} (2)`);
|
||||
console.log(this.$refs.osComponentRef2);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
min-width: 600px;
|
||||
}
|
||||
.header {
|
||||
background: #36befd;
|
||||
background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
|
||||
background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
letter-spacing: 0.1pt;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15),
|
||||
0 55px 50px -35px rgba(47, 78, 249, 0.12);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.header code {
|
||||
border-radius: 4px;
|
||||
margin: 2px;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
background: #fff;
|
||||
font-size: 10pt;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
|
||||
}
|
||||
.header code .code-keyword {
|
||||
color: #0059ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header code .code-char {
|
||||
color: #4d4d4c;
|
||||
}
|
||||
.header code .code-variable {
|
||||
color: #3778ad;
|
||||
}
|
||||
.header code .code-string {
|
||||
color: #279737;
|
||||
font-weight: 400;
|
||||
}
|
||||
.content {
|
||||
min-height: calc(100vh - 76px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-flow: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-section {
|
||||
position: relative;
|
||||
padding: 40px 0px;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section:last-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.content-section:before,
|
||||
.content-section:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content-section:nth-child(2n - 1) {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section:nth-child(2n - 1):before,
|
||||
.content-section:nth-child(2n - 1):after {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0) {
|
||||
background: #fff;
|
||||
}
|
||||
.content-section:nth-child(2n + 0):before,
|
||||
.content-section:nth-child(2n + 0):after {
|
||||
background: #f6f8fb;
|
||||
}
|
||||
.content-section.skew:before,
|
||||
.content-section.skew:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section.skew + .content-section:before,
|
||||
.content-section.skew + .content-section:after {
|
||||
transform: skewY(-7deg);
|
||||
}
|
||||
.content-section skew + .content-section.skew:before,
|
||||
.content-section.skew + .content-section.skew:before {
|
||||
top: 0;
|
||||
}
|
||||
.content-section + .content-section.skew:before {
|
||||
top: -50vw;
|
||||
}
|
||||
.content-section.skew + .content-section:after {
|
||||
bottom: -50vw;
|
||||
}
|
||||
.content-section + .content-section:after {
|
||||
top: 0;
|
||||
}
|
||||
.content-section.skew + .content-section.skew:after {
|
||||
bottom: 0;
|
||||
}
|
||||
.content-section.skew:first-child:before {
|
||||
top: -50vw !important;
|
||||
}
|
||||
.content-section.skew:last-child:after {
|
||||
bottom: -50vw !important;
|
||||
}
|
||||
.content-section-content-framework > span {
|
||||
font-weight: bold;
|
||||
font-size: 30pt;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.content-section-content-framework > span:not(:nth-child(2)) {
|
||||
display: inline-block;
|
||||
color: transparent;
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content-section-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.content-section-title > h2 {
|
||||
text-align: center;
|
||||
font-size: 26pt;
|
||||
color: #39547a;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
.content-section-title > table {
|
||||
text-align: left;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-title > table tr {
|
||||
margin: 10px;
|
||||
}
|
||||
.content-section-title > table td {
|
||||
line-height: 18pt;
|
||||
}
|
||||
.content-section-title > table td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
vertical-align: top;
|
||||
}
|
||||
.content-section-title > table td:first-child span {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
.content-section-title > table td:last-child span {
|
||||
text-align: left;
|
||||
color: #36befd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-section-content {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.content-section-content .os-host,
|
||||
.content-section-content .os-host-textarea {
|
||||
border: 2px solid #36befd;
|
||||
width: 480px;
|
||||
max-height: 300px;
|
||||
margin: 10px auto 20px auto;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
line-height: 16pt;
|
||||
}
|
||||
.content-section-content > .os-host .os-host,
|
||||
.content-section-content > .os-host-textarea .os-host-textarea {
|
||||
border: 2px solid #6461f6;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px auto;
|
||||
}
|
||||
.content-section-content .bonus-content {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
background: #f0f3f6;
|
||||
padding: 0px 5px;
|
||||
margin: 2px;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid #dde3ed;
|
||||
font-size: 10pt;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
color: #39547a;
|
||||
}
|
||||
.content-section-content-buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.info-span {
|
||||
background: #f7f7f7;
|
||||
padding: 2px 5px;
|
||||
margin: 2px;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dedfe0;
|
||||
font-weight: bold;
|
||||
font-size: 10pt;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
color: #36befd;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
|
||||
padding: 0px 1px;
|
||||
font-weight: 600;
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 0%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
z-index: -1;
|
||||
border-bottom: 1px dotted #36befd;
|
||||
transition: height 0.3s, border 0.3s, background-color 0.15s;
|
||||
}
|
||||
a:hover:before {
|
||||
height: 100%;
|
||||
background: #36befd;
|
||||
border-bottom: 1px solid #36befd;
|
||||
}
|
||||
.buttons {
|
||||
display: table;
|
||||
margin: 0px auto;
|
||||
}
|
||||
button {
|
||||
font-size: 10pt;
|
||||
line-height: 28pt;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
color: #555e6b;
|
||||
line-height: 40px;
|
||||
border: 1px solid #d6d6d6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s, background-color 0.3s, border-color 0.3s,
|
||||
box-shadow 0.3s;
|
||||
padding: 0px 14px;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
min-width: 80px;
|
||||
outline: none !important;
|
||||
}
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
border-color: #6461f6;
|
||||
box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
|
||||
}
|
||||
button:active {
|
||||
box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #6461f6;
|
||||
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
img {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.os-logo {
|
||||
background: transparent url("assets/overlayscrollbars.svg") no-repeat center
|
||||
center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.framework-logo {
|
||||
background: transparent url("assets/vue.svg") no-repeat center center;
|
||||
background-size: 80%;
|
||||
}
|
||||
.custom-class-name-test {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +0,0 @@
|
||||
import "overlayscrollbars/css/OverlayScrollbars.css";
|
||||
import { createApp } from "vue";
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
import App from "./App.vue";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.mount("#app");
|
||||
|
||||
OverlayScrollbars(document.body, {
|
||||
nativeScrollbarsOverlaid: {
|
||||
initialize: false,
|
||||
},
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"esModuleInterop": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.vite-config.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||
"include": ["vite.config.*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import { fileURLToPath, URL } from "url";
|
||||
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
});
|
||||
-4681
File diff suppressed because it is too large
Load Diff
@@ -1,54 +0,0 @@
|
||||
{
|
||||
"name": "overlayscrollbars-vue",
|
||||
"version": "0.3.0",
|
||||
"description": "OverlayScrollbars wrapper for Vue.",
|
||||
"keywords": [
|
||||
"overlayscrollbars",
|
||||
"vue"
|
||||
],
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"homepage": "https://kingsora.github.io/OverlayScrollbars",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/KingSora/OverlayScrollbars/issues"
|
||||
},
|
||||
"main": "./dist/overlayscrollbars-vue.js",
|
||||
"module": "./dist/overlayscrollbars-vue.esm.js",
|
||||
"typings": "./dist/types/index.d.ts",
|
||||
"author": "KingSora | Rene Haas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.8",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@types/overlayscrollbars": "^1.9.0",
|
||||
"@vue/babel-plugin-jsx": "^1.1.1",
|
||||
"chalk": "^2.4.2",
|
||||
"gulp": "^4.0.2",
|
||||
"overlayscrollbars": "^1.11.0",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"rollup-plugin-typescript2": "^0.31.2",
|
||||
"rollup-plugin-vue": "^6.0.0",
|
||||
"shelljs": "0.7.7",
|
||||
"typescript": "^4.4.3",
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0",
|
||||
"overlayscrollbars": "^1.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"setup": "npm i && cd example && npm i && cd ..",
|
||||
"build": "node build.js",
|
||||
"example": "cd example && npm run dev",
|
||||
"build-example": "cd example && npm run build",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import {
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
defineComponent,
|
||||
ref,
|
||||
PropType,
|
||||
} from "vue";
|
||||
import OverlayScrollbars from "overlayscrollbars";
|
||||
|
||||
export default defineComponent({
|
||||
name: "OverlayScrollbars",
|
||||
|
||||
props: {
|
||||
options: {
|
||||
type: Object as PropType<OverlayScrollbars.Options>,
|
||||
},
|
||||
extensions: {
|
||||
type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
setup(props, { slots, expose }) {
|
||||
const osInstance = ref<OverlayScrollbars | null>(null);
|
||||
const osTargetRef = ref<HTMLDivElement>();
|
||||
|
||||
expose({
|
||||
osInstance(): OverlayScrollbars | null {
|
||||
return osInstance.value;
|
||||
},
|
||||
osTarget(): HTMLDivElement | null {
|
||||
return (this.$el as HTMLDivElement) || null;
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.options,
|
||||
(
|
||||
currOptions: OverlayScrollbars.Options,
|
||||
oldOptions: OverlayScrollbars.Options
|
||||
) => {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.options(currOptions);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
osInstance.value = OverlayScrollbars(
|
||||
osTargetRef.value,
|
||||
props.options || {},
|
||||
props.extensions
|
||||
);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (OverlayScrollbars.valid(osInstance.value)) {
|
||||
osInstance.value.destroy();
|
||||
osInstance.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div ref={osTargetRef} class="os-host">
|
||||
<div class="os-resize-observer-host"></div>
|
||||
<div class="os-padding">
|
||||
<div class="os-viewport">
|
||||
<div class="os-content">{slots.default?.()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-horizontal">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar os-scrollbar-vertical">
|
||||
<div class="os-scrollbar-track">
|
||||
<div class="os-scrollbar-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="os-scrollbar-corner"></div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
|
||||
@@ -1,5 +0,0 @@
|
||||
declare module "*.vue" {
|
||||
import { defineComponent } from "vue";
|
||||
const Component: ReturnType<typeof defineComponent>;
|
||||
export default Component;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist",
|
||||
"target": "es5",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"jsx": "preserve",
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist/types",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"removeComments": true
|
||||
},
|
||||
"include": [
|
||||
"./src"
|
||||
],
|
||||
"exclude": [
|
||||
"./dist",
|
||||
"./example",
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user