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

overlayscrollbars-vue vue3 support

Browse Source
This commit is contained in:
Rene
2022-05-31 03:09:02 +02:00
parent 4c87d00ea7
commit e01846053e
41 changed files with 2745 additions and 13051 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars-vue/.babelrc
+3
View File
@@ -0,0 +1,3 @@
{
"plugins": [["@vue/babel-plugin-jsx"]]
}
packages/overlayscrollbars-vue/README.md
+51 -29
View File
@@ -3,7 +3,7 @@
<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-%5E2.6.0-41B883?style=flat-square&logo=vue.js" alt="Vue"></a>
<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>
@@ -16,101 +16,123 @@
<a href="https://kingsora.github.io/OverlayScrollbars/#!faq">FAQ</a>
</h3>
<h5 align="center">
The official OverlayScrollbars wrapper for Vue.
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)
- 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 "overlayscrollbars/css/OverlayScrollbars.css";
```
#### Import
With the [Vue.use](https://vuejs.org/v2/api/#Vue-use) method you can register the wrapper globally:
```js
import Vue from 'vue';
import { OverlayScrollbarsPlugin } from 'overlayscrollbars-vue';
Vue.use(OverlayScrollbarsPlugin);
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 manually via [global](https://vuejs.org/v2/guide/components-registration.html#Global-Registration) or [local](https://vuejs.org/v2/guide/components-registration.html#Local-Registration) registration, you can simply import it and do whatever you want with it:
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 Vue from 'vue';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
// global registration
Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
// local registration
new Vue({
el: '#app',
export default {
name: "app",
components: {
'overlay-scrollbars': OverlayScrollbarsComponent
}
});
OverlayScrollbars: OverlayScrollbarsComponent,
},
};
```
#### Template
After the registration you can use it in templates like:
```html
<overlay-scrollbars>
example content
</overlay-scrollbars>
<!-- PascalCase -->
<OverlayScrollbars>example content</OverlayScrollbars>
<!-- kebab case -->
<overlay-scrollbars>example content</overlay-scrollbars>
```
The default selector is `overlay-scrollbars`, but in case you register it manually you can choose it by yourself.
#### 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
<overlay-scrollbars
:options="{ scrollbars: { autoHide: 'scroll' } }"
<OverlayScrollbars
:options="{ scrollbars: { autoHide: 'scroll' } }"
:extensions="['extensionA', 'extensionB']"
>
</overlay-scrollbars>
</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
@@ -119,4 +141,4 @@ npm run example
## License
MIT
MIT
packages/overlayscrollbars-vue/build.js
+162 -131
View File
@@ -1,152 +1,183 @@
const packageName = 'overlayscrollbars-vue';
const rollupUmdName = 'OverlayScrollbarsVue';
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'
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 rollupVue = require('rollup-plugin-vue');
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: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
plugins: [
rollupResolve(),
rollupCommonJs(),
rollupVue({ defaultLang: 'ts' })
]
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
exports: "named",
sourcemap: true,
};
sh.echo(chalk.cyanBright("Start building:"));
sh.echo(chalk.cyanBright('Start building:'));
gulp.task('prepare', function (done) {
sh.echo(`> Removing ${filesInfo.distFolder}`);
sh.rm('-rf', filesInfo.distFolder);
done();
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,
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: {
...tsconfigJson.compilerOptions,
declarationDir: filesInfo.typingsFolder,
outDir: filesInfo.distFolder,
target: "es5",
},
include: [filesInfo.srcFolder],
exclude: [filesInfo.distFolder, filesInfo.exampleFolder, 'node_modules']
},
};
sh.ShellString(JSON.stringify(newTsconfigJson, null, 4)).to(filesInfo.tsconfigJsonPath);
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('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("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.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')();
gulp.series("prepare", "tsconfigJson", "packageJson", "rollup", "example")();
packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js
Vendored
+75 -203
View File
@@ -1,212 +1,84 @@
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createVNode } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import Vue from 'vue';
class OverlayScrollbarsComponent extends Vue.extend({
name: 'overlay-scrollbars',
props: {
options: {
type: Object
},
extensions: {
type: [String, Array, Object]
}
var OverlayScrollbarsComponent = defineComponent({
name: "OverlayScrollbars",
props: {
options: {
type: Object
},
methods: {
osInstance() {
return this._osInstace;
},
osTarget() {
return this.$el || null;
}
},
watch: {
options(currOptions, oldOptions) {
let osInstance = this._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.options(currOptions);
}
}
},
data() {
return {};
},
mounted() {
this._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);
},
beforeDestroy() {
const osInstance = this._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.destroy();
this._osInstace = null;
}
extensions: {
type: [String, Array, Object]
}
}) {
constructor() {
super(...arguments);
this._osInstace = null;
}
}
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.
const 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;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (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 (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* 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", { staticClass: "os-host" }, [
_c("div", { staticClass: "os-resize-observer-host" }),
_vm._v(" "),
_c("div", { staticClass: "os-padding" }, [
_c("div", { staticClass: "os-viewport" }, [
_c("div", { staticClass: "os-content" }, [_vm._t("default")], 2)
])
]),
_vm._v(" "),
_vm._m(0),
_vm._v(" "),
_vm._m(1),
_vm._v(" "),
_c("div", { staticClass: "os-scrollbar-corner" })
])
};
var __vue_staticRenderFns__ = [
function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "os-scrollbar os-scrollbar-horizontal " }, [
_c("div", { staticClass: "os-scrollbar-track" }, [
_c("div", { staticClass: "os-scrollbar-handle" })
])
])
},
function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "os-scrollbar os-scrollbar-vertical" }, [
_c("div", { staticClass: "os-scrollbar-track" }, [
_c("div", { staticClass: "os-scrollbar-handle" })
])
])
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)]);
};
}
];
__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 */
/* style inject shadow dom */
});
const __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
const OverlayScrollbarsPlugin = {
install(vue, options) {
if (options) {
OverlayScrollbars.defaultOptions(options);
}
vue.component('overlay-scrollbars', __vue_component__);
}
};
export { __vue_component__ as OverlayScrollbarsComponent, OverlayScrollbarsPlugin };
export { OverlayScrollbarsComponent };
//# 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
+78 -244
View File
@@ -1,255 +1,89 @@
(function (global, factory) {
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';
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;
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var OverlayScrollbarsComponent = (function (_super) {
__extends(OverlayScrollbarsComponent, _super);
function OverlayScrollbarsComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._osInstace = null;
return _this;
}
return OverlayScrollbarsComponent;
}(Vue.extend({
name: 'overlay-scrollbars',
props: {
options: {
type: Object
},
extensions: {
type: [String, Array, Object]
}
},
methods: {
osInstance: function () {
return this._osInstace;
},
osTarget: function () {
return this.$el || null;
}
},
watch: {
options: function (currOptions, oldOptions) {
var osInstance = this._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.options(currOptions);
}
}
},
data: function () {
return {};
},
mounted: function () {
this._osInstace = OverlayScrollbars(this.osTarget(), this.options || {}, this.extensions);
},
beforeDestroy: function () {
var osInstance = this._osInstace;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.destroy();
this._osInstace = null;
}
}
})));
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.
const 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;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (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 (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* 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", { staticClass: "os-host" }, [
_c("div", { staticClass: "os-resize-observer-host" }),
_vm._v(" "),
_c("div", { staticClass: "os-padding" }, [
_c("div", { staticClass: "os-viewport" }, [
_c("div", { staticClass: "os-content" }, [_vm._t("default")], 2)
])
]),
_vm._v(" "),
_vm._m(0),
_vm._v(" "),
_vm._m(1),
_vm._v(" "),
_c("div", { staticClass: "os-scrollbar-corner" })
])
};
var __vue_staticRenderFns__ = [
function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "os-scrollbar os-scrollbar-horizontal " }, [
_c("div", { staticClass: "os-scrollbar-track" }, [
_c("div", { staticClass: "os-scrollbar-handle" })
])
])
var OverlayScrollbarsComponent = vue.defineComponent({
name: "OverlayScrollbars",
props: {
options: {
type: Object
},
function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "os-scrollbar os-scrollbar-vertical" }, [
_c("div", { staticClass: "os-scrollbar-track" }, [
_c("div", { staticClass: "os-scrollbar-handle" })
])
])
extensions: {
type: [String, Array, Object]
}
];
__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 */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
var OverlayScrollbarsPlugin = {
install: function (vue, options) {
if (options) {
OverlayScrollbars.defaultOptions(options);
}
vue.component('overlay-scrollbars', __vue_component__);
},
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;
exports.OverlayScrollbarsComponent = __vue_component__;
exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
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)]);
};
}
});
Object.defineProperty(exports, '__esModule', { value: true });
exports.OverlayScrollbarsComponent = OverlayScrollbarsComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=overlayscrollbars-vue.js.map
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
+18 -13
View File
@@ -1,13 +1,18 @@
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;
}
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;
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.vue.d.ts
Vendored
-7
View File
@@ -1,7 +0,0 @@
import Vue from 'vue';
import { OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps } from './OverlayScrollbarsComponent';
declare const OverlayScrollbarsComponent_base: import("vue/types/vue").ExtendedVue<Vue, OverlayScrollbarsComponentData, OverlayScrollbarsComponentMethods, OverlayScrollbarsComponentComputed, OverlayScrollbarsComponentProps>;
export default class OverlayScrollbarsComponent extends OverlayScrollbarsComponent_base {
private _osInstace;
}
export {};
packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsPlugin.d.ts
Vendored
-3
View File
@@ -1,3 +0,0 @@
import { PluginObject } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
export declare const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options>;
packages/overlayscrollbars-vue/dist/types/index.d.ts
Vendored
+1 -3
View File
@@ -1,3 +1 @@
export * from './OverlayScrollbarsPlugin';
export * from './OverlayScrollbarsComponent';
export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';
export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
packages/overlayscrollbars-vue/example/.browserslistrc
-2
View File
@@ -1,2 +0,0 @@
> 1%
last 2 versions
packages/overlayscrollbars-vue/example/.eslintrc.cjs
+15
View File
@@ -0,0 +1,15 @@
/* 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
}
}
packages/overlayscrollbars-vue/example/.gitignore
+17 -10
View File
@@ -1,19 +1,26 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
# 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
.vscode
*.suo
*.ntvs*
*.njsproj
packages/overlayscrollbars-vue/example/README.md
+33 -16
View File
@@ -1,29 +1,46 @@
# example
## Project setup
```
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
```
### Compiles and hot-reloads for development
```
npm run serve
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compiles and minifies for production
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Run your tests
```
npm run test
```
### Lint with [ESLint](https://eslint.org/)
### Lints and fixes files
```
```sh
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
packages/overlayscrollbars-vue/example/babel.config.js
-5
View File
@@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/app'
]
}
packages/overlayscrollbars-vue/example/env.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
packages/overlayscrollbars-vue/example/index.html
+13
View File
@@ -0,0 +1,13 @@
<!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>
packages/overlayscrollbars-vue/example/package-lock.json
Generated
+1081 -10468
View File
File diff suppressed because it is too large Load Diff
packages/overlayscrollbars-vue/example/package.json
+19 -12
View File
@@ -1,24 +1,31 @@
{
"name": "example",
"version": "0.1.0",
"private": true,
"version": "0.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"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",
"core-js": "^2.6.11",
"overlayscrollbars": "^1.11.0",
"overlayscrollbars-vue": "^0.1.0",
"vue": "^2.6.11"
"vue": "^3.2.33"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-typescript": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"typescript": "^3.8.3",
"vue-template-compiler": "^2.6.11"
"@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"
}
}
packages/overlayscrollbars-vue/example/postcss.config.js
-5
View File
@@ -1,5 +0,0 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}
packages/overlayscrollbars-vue/example/public/index.html
-21
View File
@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>OverlayScrollvars Vue App</title>
</head>
<body>
<noscript>
<strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
packages/overlayscrollbars-vue/example/src/App.vue
+115 -54
View File
@@ -3,9 +3,9 @@
<div class="header">
<code>
<span class="code-keyword">import</span>
<span class="code-char">{{ ' { ' }}</span>
<span class="code-char">{{ " { " }}</span>
<span class="code-variable">OverlayScrollbarsComponent</span>
<span class="code-char">{{ ' } ' }}</span>
<span class="code-char">{{ " } " }}</span>
<span class="code-keyword">from</span>
<span class="code-string">{{ " 'overlayscrollbars-vue'" }}</span>
<span class="code-char">;</span>
@@ -42,7 +42,7 @@
</table>
</div>
<div class="content-section-content">
<overlay-scrollbars
<OverlayScrollbars
ref="osComponentRef1"
:options="osComponentOptions"
style="max-height: 350px"
@@ -69,19 +69,56 @@
<br />
<br />
{{ loremIpsumLong }}
<div v-for="(item, index) in loremList" :key="index" :data-key="index">
<div
v-for="(item, index) in loremList"
:key="index"
:data-key="index"
>
<br />
{{ item }}
</div>
</overlay-scrollbars>
</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>
@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>
@@ -90,9 +127,8 @@
</template>
<script lang="ts">
import Vue, { VueConstructor } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
import type OverlayScrollbars from "overlayscrollbars";
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
export interface AppData {
framework: string;
@@ -101,7 +137,7 @@ export interface AppData {
loremIpsumLong: string;
loremIpsumMedium: string;
loremIpsumShort: string;
loremList: Array<string>
loremList: Array<string>;
componentContent: string;
osComponentOptions: OverlayScrollbars.Options;
hasCustomClassName: boolean;
@@ -109,49 +145,60 @@ export interface AppData {
export interface AppMethods {
onBtnScrollRandom(
event: MouseEvent,
refArray: Array<OverlayScrollbarsComponent>
refArray: Array<typeof OverlayScrollbarsComponent>
): void;
onBtnChangeOptions(): void;
onBtnChangeContent(): void;
onBtnLog(): void;
randomIpsum(): string;
}
export interface AppComputed { }
export interface AppProps { }
export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
name: 'app',
data: function () {
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.',
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',
componentContent: "Lorem Ipsum",
osComponentOptions: {
resize: 'both',
resize: "both",
paddingAbsolute: true,
scrollbars: {
autoHide: 'never'
}
}
autoHide: "never",
},
},
};
},
methods: {
onBtnScrollRandom(event: MouseEvent, refArray: Array<OverlayScrollbarsComponent>) {
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');
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"
);
}
}
}
@@ -160,37 +207,51 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
onBtnChangeOptions() {
this.hasCustomClassName = !this.hasCustomClassName;
this.osComponentOptions = {
resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
resize: this.osComponentOptions.resize === "both" ? "none" : "both",
scrollbars: {
autoHide: this.osComponentOptions.scrollbars!.autoHide === 'never' ? 'scroll' : 'never'
}
autoHide:
this.osComponentOptions.scrollbars!.autoHide === "never"
? "scroll"
: "never",
},
};
},
onBtnChangeContent() {
this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
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 OverlayScrollbarsComponent).osInstance());
console.log('Target:');
console.log((this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osTarget());
console.log('');
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());
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
this.loremIpsumShort,
];
return loremIpsums[Math.floor(Math.random() * loremIpsums.length)];
}
},
},
mounted() {
console.log(`${this.componentClass} (1)`);
@@ -198,8 +259,8 @@ export default Vue.extend<AppData, AppMethods, AppComputed, AppProps>({
console.log(`${this.componentClass} (2)`);
console.log(this.$refs.osComponentRef2);
}
});
},
};
</script>
<style>
@@ -515,4 +576,4 @@ img {
.custom-class-name-test {
background: rgba(0, 0, 0, 0.03);
}
</style>
</style>
packages/overlayscrollbars-vue/example/src/main.ts
+9 -15
View File
@@ -1,20 +1,14 @@
import "overlayscrollbars/css/OverlayScrollbars.css";
import './styles.css';
import Vue from 'vue';
import App from './App.vue';
import OverlayScrollbars from 'overlayscrollbars';
import { OverlayScrollbarsPlugin } from "overlayscrollbars-vue";
import { createApp } from "vue";
import OverlayScrollbars from "overlayscrollbars";
import App from "./App.vue";
Vue.config.productionTip = false
const app = createApp(App);
Vue.use(OverlayScrollbarsPlugin);
new Vue({
render: h => h(App),
}).$mount('#app')
app.mount("#app");
OverlayScrollbars(document.body, {
nativeScrollbarsOverlaid: {
initialize: false
}
});
nativeScrollbarsOverlaid: {
initialize: false,
},
});
packages/overlayscrollbars-vue/example/src/shims-tsx.d.ts
Vendored
-13
View File
@@ -1,13 +0,0 @@
import Vue, { VNode } from 'vue';
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
packages/overlayscrollbars-vue/example/src/shims-vue.d.ts
Vendored
-4
View File
@@ -1,4 +0,0 @@
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
packages/overlayscrollbars-vue/example/src/styles.css
-11
View File
@@ -1,11 +0,0 @@
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 11pt;
color: #31485B;
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
packages/overlayscrollbars-vue/example/tsconfig.json
+10 -31
View File
@@ -1,38 +1,17 @@
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"esModuleInterop": true,
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
"@/*": ["./src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
"references": [
{
"path": "./tsconfig.vite-config.json"
}
]
}
packages/overlayscrollbars-vue/example/tsconfig.vite-config.json
+8
View File
@@ -0,0 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
packages/overlayscrollbars-vue/example/tslint.json
-19
View File
@@ -1,19 +0,0 @@
{
"defaultSeverity": "warning",
"extends": [
"tslint:recommended"
],
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"quotemark": [true, "single"],
"indent": [true, "spaces", 2],
"interface-name": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-consecutive-blank-lines": false
}
}
packages/overlayscrollbars-vue/example/vite.config.ts
+14
View File
@@ -0,0 +1,14 @@
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)),
},
},
});
packages/overlayscrollbars-vue/example/vue.config.js
-4
View File
@@ -1,4 +0,0 @@
module.exports = {
lintOnSave: false,
publicPath: '/OverlayScrollbars/frameworks/vue/'
}
packages/overlayscrollbars-vue/package-lock.json
Generated
+914 -1587
View File
File diff suppressed because it is too large Load Diff
packages/overlayscrollbars-vue/package.json
+10 -8
View File
@@ -1,6 +1,6 @@
{
"name": "overlayscrollbars-vue",
"version": "0.2.2",
"version": "0.3.0",
"description": "OverlayScrollbars wrapper for Vue.",
"keywords": [
"overlayscrollbars",
@@ -24,28 +24,30 @@
"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.22.0",
"rollup-plugin-vue": "^5.1.6",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-vue": "^6.0.0",
"shelljs": "0.7.7",
"typescript": "^3.8.3",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
"typescript": "^4.4.3",
"vue": "^3.0.0"
},
"peerDependencies": {
"vue": "^2.6.0",
"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 serve",
"example": "cd example && npm run dev",
"build-example": "cd example && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
}
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.ts
-15
View File
@@ -1,15 +0,0 @@
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.tsx
+89
View File
@@ -0,0 +1,89 @@
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>
);
},
});
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
-94
View File
@@ -1,94 +0,0 @@
<template>
<div class="os-host">
<div class="os-resize-observer-host"></div>
<div class="os-padding">
<div class="os-viewport">
<div class="os-content">
<slot></slot>
</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>
</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/rfcs/blob/attr-fallthrough/active-rfcs/0000-attr-fallthrough.md
// 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)._osInstance;
},
osTarget(): HTMLDivElement | null {
return (this.$el as HTMLDivElement) || null;
}
},
watch: {
options(
currOptions: OverlayScrollbars.Options,
oldOptions: OverlayScrollbars.Options
) {
let osInstance = (this as OverlayScrollbarsComponent)._osInstance;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.options(currOptions);
}
}
},
data() {
return {};
},
mounted() {
(this as OverlayScrollbarsComponent)._osInstance = OverlayScrollbars(
this.osTarget(),
this.options || {},
this.extensions
);
},
beforeDestroy() {
const osInstance = (this as OverlayScrollbarsComponent)._osInstance;
if (OverlayScrollbars.valid(osInstance)) {
osInstance.destroy();
(this as OverlayScrollbarsComponent)._osInstance = null;
}
}
}) {
private _osInstance: OverlayScrollbars | null = null;
}
</script>
packages/overlayscrollbars-vue/src/OverlayScrollbarsPlugin.ts
-13
View File
@@ -1,13 +0,0 @@
import { VueConstructor, PluginObject } from 'vue';
import OverlayScrollbars from 'overlayscrollbars';
import OverlayScrollbarsComponent from './OverlayScrollbarsComponent.vue';
export const OverlayScrollbarsPlugin: PluginObject<OverlayScrollbars.Options> = {
install(vue: VueConstructor, options?: OverlayScrollbars.Options) {
if (options) {
OverlayScrollbars.defaultOptions(options);
}
vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
}
}
packages/overlayscrollbars-vue/src/index.ts
+1 -3
View File
@@ -1,3 +1 @@
export * from './OverlayScrollbarsPlugin';
export * from './OverlayScrollbarsComponent';
export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';
export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
packages/overlayscrollbars-vue/src/shim.d.ts
Vendored
+5 -4
View File
@@ -1,4 +1,5 @@
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
declare module "*.vue" {
import { defineComponent } from "vue";
const Component: ReturnType<typeof defineComponent>;
export default Component;
}
packages/overlayscrollbars-vue/tsconfig.json
+1 -2
View File
@@ -8,8 +8,7 @@
"target": "es5",
"sourceMap": true,
"inlineSources": true,
"jsx": "react",
"jsxFactory": "createElement",
"jsx": "preserve",
"declaration": true,
"declarationDir": "./dist/types",
"noImplicitAny": true,