mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-02 19:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

build script changes, vue: from jsx to template

Browse Source
This commit is contained in:
Rene
2019-08-01 21:26:11 +02:00
parent 2b90b89598
commit 3b6630a30a
24 changed files with 592 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -42,6 +42,7 @@ I've created this plugin because I hate ugly and space consuming scrollbars. Sim
- RTL Direction support. (with normalization)
- Simple and effective scrollbar-styling.
- Rich extension system.
- TypeScript support.
## Sponsors
<table>
@@ -138,7 +139,7 @@ I recommend setting these options in your **tsconfig.json**:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"esModuleInterop": true
}
}
```
build.js
+3 -3
View File
@@ -1,8 +1,8 @@
const sh = require('shelljs');
const fs = require('fs');
const sh = require('shelljs');
const chalk = require('chalk');
const gulp = require('gulp');
const UglifyJS = require('uglify-js');
const uglify = require('uglify-js');
const csso = require('csso');
const uglifyFiles = [
@@ -28,7 +28,7 @@ gulp.task('uglify', function (done) {
uglifyFiles.forEach((file) => {
if (sh.test('-f', file.src)) {
sh.echo(chalk.yellowBright('uglify: ') + chalk.greenBright(`${file.src} → ${file.dest}`));
sh.ShellString(UglifyJS.minify(fs.readFileSync(file.src, 'utf-8'), {
sh.ShellString(uglify.minify(fs.readFileSync(file.src, 'utf-8'), {
ie8: true,
compress: {
ie8: true
packages/overlayscrollbars-ngx/build.js
+2 -1
View File
@@ -10,7 +10,6 @@ const filesInfo = {
tsconfigJsonPath: './tsconfig.json',
packageJsonPath: './package.json',
cache: [
'.rpt2_cache', // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
'./ngc'
]
}
@@ -114,6 +113,8 @@ gulp.task('rollup', function (done) {
(async function () {
let rollupTsconfig = {
useTsconfigDeclarationDir: true,
objectHashIgnoreUnknownHack: true,
clean: true,
tsconfig: filesInfo.tsconfigJsonPath,
tsconfigOverride: {
compilerOptions: {
packages/overlayscrollbars-ngx/package.json
+1
View File
@@ -51,6 +51,7 @@
"overlayscrollbars": "^1.9.0"
},
"scripts": {
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npx ng serve",
"test": "echo \"Error: no test specified\" && exit 1"
packages/overlayscrollbars-react/build.js
+3 -3
View File
@@ -8,9 +8,7 @@ const filesInfo = {
exampleFolder: './example',
tsconfigJsonPath: './tsconfig.json',
packageJsonPath: './package.json',
cache: [
'.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
]
cache: []
}
const packagePaths = {
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
@@ -93,6 +91,8 @@ gulp.task('rollup', function (done) {
(async function () {
let rollupTsconfig = {
useTsconfigDeclarationDir: true,
objectHashIgnoreUnknownHack: true,
clean: true,
tsconfig: filesInfo.tsconfigJsonPath,
tsconfigOverride: {
compilerOptions: {
packages/overlayscrollbars-react/dist/overlayscrollbars-react.esm.js.map
Vendored
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n children?: any;\r\n options?: OverlayScrollbars.Options;\r\n extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n private _osInstance: OverlayScrollbars | null = null;\r\n private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n constructor(props: OverlayScrollbarsComponentProps) {\r\n super(props);\r\n this._osTargetRef = React.createRef();\r\n }\r\n\r\n osInstance(): OverlayScrollbars | null {\r\n return this._osInstance;\r\n }\r\n\r\n osTarget(): HTMLDivElement | null {\r\n return this._osTargetRef.current || null;\r\n }\r\n\r\n componentDidMount() {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n }\r\n\r\n componentWillUnmount() {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(this.props.options);\r\n }\r\n }\r\n\r\n render() {\r\n let {\r\n options,\r\n extensions,\r\n children,\r\n ...divProps\r\n } = this.props;\r\n\r\n return (\r\n <div {...divProps} ref={this._osTargetRef}>\r\n {...this.props.children}\r\n </div>\r\n );\r\n }\r\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}
{"version":3,"file":"overlayscrollbars-react.esm.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n ...divProps\n } = this.props;\n\n return (\n <div {...divProps} ref={this._osTargetRef}>\n {...this.props.children}\n </div>\n );\n }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,0BAA2B,SAAQ,SAA2E;IAIvH,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,gBAAW,GAA6B,IAAI,CAAC;QAKjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;KACzC;IAED,UAAU;QACN,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,QAAQ;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACb,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;KAC1G;IAED,oBAAoB;QAChB,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SAC3B;KACJ;IAED,kBAAkB,CAAC,SAA0C;QACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAChD;KACJ;IAED,MAAM;QACF,IAAI,eAKU,EALV,AAIA,4DACU,CAAC;QAEf,QACI,6CAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;KACL;CACJ;;;;"}
packages/overlayscrollbars-react/dist/overlayscrollbars-react.js.map
Vendored
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\r\nimport OverlayScrollbars from \"overlayscrollbars\";\r\n\r\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\r\n children?: any;\r\n options?: OverlayScrollbars.Options;\r\n extensions?: OverlayScrollbars.Extensions;\r\n}\r\nexport interface OverlayScrollbarsComponentState { }\r\n\r\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\r\n private _osInstance: OverlayScrollbars | null = null;\r\n private _osTargetRef: RefObject<HTMLDivElement>;\r\n\r\n constructor(props: OverlayScrollbarsComponentProps) {\r\n super(props);\r\n this._osTargetRef = React.createRef();\r\n }\r\n\r\n osInstance(): OverlayScrollbars | null {\r\n return this._osInstance;\r\n }\r\n\r\n osTarget(): HTMLDivElement | null {\r\n return this._osTargetRef.current || null;\r\n }\r\n\r\n componentDidMount() {\r\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\r\n }\r\n\r\n componentWillUnmount() {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.destroy();\r\n this._osInstance = null;\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\r\n if (OverlayScrollbars.valid(this._osInstance)) {\r\n this._osInstance.options(this.props.options);\r\n }\r\n }\r\n\r\n render() {\r\n let {\r\n options,\r\n extensions,\r\n children,\r\n ...divProps\r\n } = this.props;\r\n\r\n return (\r\n <div {...divProps} ref={this._osTargetRef}>\r\n {...this.props.children}\r\n </div>\r\n );\r\n }\r\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}
{"version":3,"file":"overlayscrollbars-react.js","sources":["../src/OverlayScrollbarsComponent.tsx"],"sourcesContent":["import React, { Component, RefObject } from 'react';\nimport OverlayScrollbars from \"overlayscrollbars\";\n\nexport interface OverlayScrollbarsComponentProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: any;\n options?: OverlayScrollbars.Options;\n extensions?: OverlayScrollbars.Extensions;\n}\nexport interface OverlayScrollbarsComponentState { }\n\nexport class OverlayScrollbarsComponent extends Component<OverlayScrollbarsComponentProps, OverlayScrollbarsComponentState> {\n private _osInstance: OverlayScrollbars | null = null;\n private _osTargetRef: RefObject<HTMLDivElement>;\n\n constructor(props: OverlayScrollbarsComponentProps) {\n super(props);\n this._osTargetRef = React.createRef();\n }\n\n osInstance(): OverlayScrollbars | null {\n return this._osInstance;\n }\n\n osTarget(): HTMLDivElement | null {\n return this._osTargetRef.current || null;\n }\n\n componentDidMount() {\n this._osInstance = OverlayScrollbars(this.osTarget(), this.props.options || {}, this.props.extensions);\n }\n\n componentWillUnmount() {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.destroy();\n this._osInstance = null;\n }\n }\n\n componentDidUpdate(prevProps: OverlayScrollbarsComponentProps) {\n if (OverlayScrollbars.valid(this._osInstance)) {\n this._osInstance.options(this.props.options);\n }\n }\n\n render() {\n let {\n options,\n extensions,\n children,\n ...divProps\n } = this.props;\n\n return (\n <div {...divProps} ref={this._osTargetRef}>\n {...this.props.children}\n </div>\n );\n }\n}"],"names":["tslib_1.__extends","React","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUgDA,8CAA2E;QAIvH,oCAAY,KAAsC;YAAlD,YACI,kBAAM,KAAK,CAAC,SAEf;YANO,iBAAW,GAA6B,IAAI,CAAC;YAKjD,KAAI,CAAC,YAAY,GAAGC,cAAK,CAAC,SAAS,EAAE,CAAC;;SACzC;QAED,+CAAU,GAAV;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;SAC3B;QAED,6CAAQ,GAAR;YACI,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC;SAC5C;QAED,sDAAiB,GAAjB;YACI,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC1G;QAED,yDAAoB,GAApB;YACI,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;SACJ;QAED,uDAAkB,GAAlB,UAAmB,SAA0C;YACzD,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;gBAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAChD;SACJ;QAED,2CAAM,GAAN;YACI,IAAI,eAKU,EAJV,oBAAO,EACP,0BAAU,EACV,sBAAQ,EACR,4DACU,CAAC;YAEf,QACIA,iDAAS,QAAQ,IAAE,GAAG,EAAE,IAAI,CAAC,YAAY,KACjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CACrB,EACR;SACL;QACL,iCAAC;IAAD,CAhDA,CAAgDC,eAAS;;;;;;;;;;;;"}
packages/overlayscrollbars-react/package.json
+1
View File
@@ -44,6 +44,7 @@
"overlayscrollbars": "^1.9.0"
},
"scripts": {
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npm start",
"test": "echo \"Error: no test specified\" && exit 1"
packages/overlayscrollbars-react/rollup.config.js
-38
View File
@@ -1,38 +0,0 @@
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import pkg from './package.json';
const globals = {
'react': 'React',
'overlayscrollbars': 'OverlayScrollbars'
};
const external = [...Object.keys(pkg.devDependencies), ...Object.keys(pkg.peerDependencies)];
export default {
input: './src/index.ts',
output: [
{
name: 'OverlayScrollbarsReact',
globals: globals,
file: pkg.main,
format: 'umd',
exports: 'named',
sourcemap: true
},
{
file: pkg.module,
format: 'es',
exports: 'named',
sourcemap: true
}
],
external: external,
plugins: [
typescript({
useTsconfigDeclarationDir : true
}),
resolve(),
commonjs()
]
};
packages/overlayscrollbars-vue/build.js
+6 -4
View File
@@ -8,9 +8,7 @@ const filesInfo = {
exampleFolder: './example',
tsconfigJsonPath: './tsconfig.json',
packageJsonPath: './package.json',
cache: [
'.rpt2_cache' // https://github.com/ezolenko/rollup-plugin-typescript2/blob/master/README.md#plugin-options
]
cache: []
}
const packagePaths = {
main: `${filesInfo.distFolder}/${filesInfo.fileName}.js`,
@@ -32,12 +30,14 @@ const rollup = require('rollup');
const rollupCommonJs = require('rollup-plugin-commonjs');
const rollupTypeScript = require('rollup-plugin-typescript2');
const rollupResolve = require('rollup-plugin-node-resolve');
const rollupVue = require('rollup-plugin-vue');
const rollupInputConfig = {
input: `${filesInfo.srcFolder}/index.ts`,
external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
plugins: [
rollupResolve(),
rollupCommonJs()
rollupCommonJs(),
rollupVue({ defaultLang: 'ts' })
]
};
const rollupOutputConfig = {
@@ -93,6 +93,8 @@ gulp.task('rollup', function (done) {
(async function () {
let rollupTsconfig = {
useTsconfigDeclarationDir: true,
objectHashIgnoreUnknownHack: true,
clean: true,
tsconfig: filesInfo.tsconfigJsonPath,
tsconfigOverride: {
compilerOptions: {
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js
Vendored
+127 -7
View File
@@ -1,8 +1,8 @@
import Vue from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import Vue from 'vue';
class OverlayScrollbarsComponent extends Vue.extend({
name: 'overlay-scrollbars',
name: "overlay-scrollbars",
props: {
options: {
type: Object
@@ -39,9 +39,6 @@ class OverlayScrollbarsComponent extends Vue.extend({
osInstance.destroy();
this._osInstace = null;
}
},
render(createElement) {
return (createElement("div", null, this.$slots.default));
}
}) {
constructor() {
@@ -50,14 +47,137 @@ class OverlayScrollbarsComponent extends Vue.extend({
}
}
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
const __vue_script__ = OverlayScrollbarsComponent;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", [_vm._t("default")], 2)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var OverlayScrollbarsComponent$1 = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
const OverlayScrollbarsPlugin = {
install(vue, options) {
if (options) {
OverlayScrollbars.defaultOptions(options);
}
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
vue.component('overlay-scrollbars', OverlayScrollbarsComponent$1);
}
};
export { OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
export { OverlayScrollbarsComponent$1 as OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
//# sourceMappingURL=overlayscrollbars-vue.esm.js.map
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js
Vendored
+131 -11
View File
@@ -1,11 +1,11 @@
(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';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('overlayscrollbars'), require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'overlayscrollbars', 'vue'], factory) :
(global = global || self, factory(global.OverlayScrollbarsVue = {}, global.OverlayScrollbars, global.Vue));
}(this, function (exports, OverlayScrollbars, Vue) { 'use strict';
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
@@ -45,7 +45,7 @@
}
return OverlayScrollbarsComponent;
}(Vue.extend({
name: 'overlay-scrollbars',
name: "overlay-scrollbars",
props: {
options: {
type: Object
@@ -82,22 +82,142 @@
osInstance.destroy();
this._osInstace = null;
}
},
render: function (createElement) {
return (createElement("div", null, this.$slots.default));
}
})));
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
const __vue_script__ = OverlayScrollbarsComponent;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", [_vm._t("default")], 2)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var OverlayScrollbarsComponent$1 = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
var OverlayScrollbarsPlugin = {
install: function (vue, options) {
if (options) {
OverlayScrollbars.defaultOptions(options);
}
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
vue.component('overlay-scrollbars', OverlayScrollbarsComponent$1);
}
};
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent$1;
exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
Object.defineProperty(exports, '__esModule', { value: true });
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.d.ts
Vendored
+1 -7
View File
@@ -1,5 +1,4 @@
import Vue, { VueConstructor } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import OverlayScrollbars from "overlayscrollbars";
export interface OverlayScrollbarsComponentData {
}
export interface OverlayScrollbarsComponentMethods {
@@ -12,8 +11,3 @@ export interface OverlayScrollbarsComponentProps {
options: OverlayScrollbars.Options;
extensions: OverlayScrollbars.Extensions;
}
declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
export declare class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
private _osInstace;
}
export {};
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.vue.d.ts
Vendored
+7
View File
@@ -0,0 +1,7 @@
import Vue, { VueConstructor } from "vue";
import { OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps } from "./OverlayScrollbarsComponent";
declare const OverlayScrollbarsComponent_base: VueConstructor<OverlayScrollbarsComponentData & OverlayScrollbarsComponentMethods & OverlayScrollbarsComponentComputed & OverlayScrollbarsComponentProps & Vue>;
export default class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
private _osInstace;
}
export {};
packages/overlayscrollbars-vue/dist/types/index.d.ts
Vendored
+1
View File
@@ -1,2 +1,3 @@
export * from './OverlayScrollbarsPlugin';
export * from './OverlayScrollbarsComponent';
export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';
packages/overlayscrollbars-vue/example/src/App.vue
+202 -202
View File
@@ -84,11 +84,11 @@
</template>
<script lang="ts">
import Vue from "vue";
import Vue, { VueConstructor } from "vue";
import OverlayScrollbars from "overlayscrollbars";
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
interface AppData {
export interface AppData {
framework: string;
componentClass: string;
loremIpsumLong: string;
@@ -97,7 +97,7 @@ interface AppData {
componentContent: string;
osComponentOptions: OverlayScrollbars.Options;
}
interface AppMethods {
export interface AppMethods {
onBtnScrollRandom(
event: MouseEvent,
refArray: Array<OverlayScrollbarsComponent>
@@ -106,8 +106,8 @@ interface AppMethods {
onBtnChangeContent(): void;
onBtnLog(): void;
}
interface AppComputed { }
interface AppProps { }
export interface AppComputed { }
export interface AppProps { }
export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
name: "app",
@@ -187,309 +187,309 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
<style>
.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;
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);
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;
color: #0059ff;
font-weight: bold;
}
.header code .code-char {
color: #4d4d4c;
color: #4d4d4c;
}
.header code .code-variable {
color: #3778ad;
color: #3778ad;
}
.header code .code-string {
color: #279737;
font-weight: 400;
color: #279737;
font-weight: 400;
}
.content {
min-height: calc(100vh - 76px);
position: relative;
display: flex;
flex-direction: column;
flex-flow: column;
flex-wrap: wrap;
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;
position: relative;
padding: 40px 0px;
background: #fff;
z-index: 1;
overflow: hidden;
}
.content-section:last-child {
flex-grow: 1;
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: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.content-section:nth-child(2n - 1) {
background: #f6f8fb;
background: #f6f8fb;
}
.content-section:nth-child(2n - 1):before,
.content-section:nth-child(2n - 1):after {
background: #fff;
background: #fff;
}
.content-section:nth-child(2n + 0) {
background: #fff;
background: #fff;
}
.content-section:nth-child(2n + 0):before,
.content-section:nth-child(2n + 0):after {
background: #f6f8fb;
background: #f6f8fb;
}
.content-section.skew:before,
.content-section.skew:after {
transform: skewY(-7deg);
transform: skewY(-7deg);
}
.content-section.skew + .content-section:before,
.content-section.skew + .content-section:after {
transform: skewY(-7deg);
transform: skewY(-7deg);
}
.content-section skew + .content-section.skew:before,
.content-section.skew + .content-section.skew:before {
top: 0;
top: 0;
}
.content-section + .content-section.skew:before {
top: -50vw;
top: -50vw;
}
.content-section.skew + .content-section:after {
bottom: -50vw;
bottom: -50vw;
}
.content-section + .content-section:after {
top: 0;
top: 0;
}
.content-section.skew + .content-section.skew:after {
bottom: 0;
bottom: 0;
}
.content-section.skew:first-child:before {
top: -50vw !important;
top: -50vw !important;
}
.content-section.skew:last-child:after {
bottom: -50vw !important;
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;
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;
display: inline-block;
color: transparent;
height: 190px;
width: 190px;
vertical-align: middle;
}
.content-section-title {
margin-bottom: 14px;
margin-bottom: 14px;
}
.content-section-title > h2 {
text-align: center;
font-size: 26pt;
color: #39547a;
margin: 24px 0px;
text-align: center;
font-size: 26pt;
color: #39547a;
margin: 24px 0px;
}
.content-section-title > table {
text-align: left;
margin: 0px auto;
text-align: left;
margin: 0px auto;
}
.content-section-title > table tr {
margin: 10px;
margin: 10px;
}
.content-section-title > table td {
line-height: 18pt;
line-height: 18pt;
}
.content-section-title > table td:first-child {
text-align: right;
font-weight: bold;
vertical-align: top;
text-align: right;
font-weight: bold;
vertical-align: top;
}
.content-section-title > table td:first-child span {
margin: 0px 6px;
margin: 0px 6px;
}
.content-section-title > table td:last-child span {
text-align: left;
color: #36befd;
font-weight: bold;
text-align: left;
color: #36befd;
font-weight: bold;
}
.content-section-content {
display: table;
margin: 0px auto;
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;
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;
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;
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;
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;
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;
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);
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;
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;
height: 100%;
background: #36befd;
border-bottom: 1px solid #36befd;
}
.buttons {
display: table;
margin: 0px auto;
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;
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);
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);
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);
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;
-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%;
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: 84%;
background: transparent url("assets/vue.svg") no-repeat center center;
background-size: 84%;
}
</style>
</style>
packages/overlayscrollbars-vue/package.json
+5 -2
View File
@@ -33,17 +33,20 @@
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.22.0",
"rollup-plugin-vue": "^5.0.1",
"shelljs": "0.7.7",
"typescript": "^3.0.3",
"vue": "^2.6.10"
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"peerDependencies": {
"vue": "^2.6.10",
"overlayscrollbars": "^1.9.0"
},
"scripts": {
"setup": "npm i && cd example && npm i && cd ..",
"build": "node build.js",
"example": "cd example && npm run serve",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
}
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.ts
+15
View File
@@ -0,0 +1,15 @@
import OverlayScrollbars from "overlayscrollbars";
export interface OverlayScrollbarsComponentData { }
export interface OverlayScrollbarsComponentMethods {
osInstance(): OverlayScrollbars | null;
osTarget(): HTMLDivElement | null;
}
export interface OverlayScrollbarsComponentComputed { }
export interface OverlayScrollbarsComponentProps {
options: OverlayScrollbars.Options;
extensions: OverlayScrollbars.Extensions;
}
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<div>
<slot></slot>
</div>
</template>
<script lang="ts">
import Vue, { VueConstructor, VNode, CreateElement, PropType } from "vue";
import OverlayScrollbars from "overlayscrollbars";
import {
OverlayScrollbarsComponentData,
OverlayScrollbarsComponentMethods,
OverlayScrollbarsComponentComputed,
OverlayScrollbarsComponentProps
} from "./OverlayScrollbarsComponent";
// https://github.com/vuejs/vue/issues/7060
export default class OverlayScrollbarsComponent extends Vue.extend<
OverlayScrollbarsComponentData,
OverlayScrollbarsComponentMethods,
OverlayScrollbarsComponentComputed,
OverlayScrollbarsComponentProps
>({
name: "overlay-scrollbars", // https://vuejs.org/v2/guide/components-registration.html#Component-Names
props: {
options: {
type: Object as PropType<OverlayScrollbars.Options>
},
extensions: {
type: [String, Array, Object] as PropType<OverlayScrollbars.Extensions>
}
},
methods: {
osInstance(): OverlayScrollbars | null {
return (this as OverlayScrollbarsComponent)._osInstace;
},
osTarget(): HTMLDivElement | null {
return (this.$el as HTMLDivElement) || null;
}
},
watch: {
options(
currOptions: OverlayScrollbars.Options,
oldOptions: OverlayScrollbars.Options
) {
let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.options(currOptions);
}
}
},
data() {
return {};
},
mounted() {
(this as OverlayScrollbarsComponent)._osInstace = OverlayScrollbars(
this.osTarget(),
this.options || {},
this.extensions
);
},
beforeDestroy() {
let osInstance = (this as OverlayScrollbarsComponent)._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.destroy();
(this as OverlayScrollbarsComponent)._osInstace = null;
}
}
}) {
private _osInstace: OverlayScrollbars | null = null;
}
</script>
packages/overlayscrollbars-vue/src/OverlayScrollbarsPlugin.ts
+1 -2
View File
@@ -1,7 +1,6 @@
import { VueConstructor, PluginObject } from 'vue';
import { OverlayScrollbarsComponent } from './OverlayScrollbarsComponent';
import OverlayScrollbars from 'overlayscrollbars';
import OverlayScrollbarsComponent from './OverlayScrollbarsComponent.vue';
export const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {
install(vue: VueConstructor, options?: OverlayScrollbars.Options) {
packages/overlayscrollbars-vue/src/index.ts
+1
View File
@@ -1,2 +1,3 @@
export * from './OverlayScrollbarsPlugin';
export * from './OverlayScrollbarsComponent';
export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';
packages/overlayscrollbars-vue/src/shim.d.ts
Vendored
+4
View File
@@ -0,0 +1,4 @@
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}