overlayscrollbars-vue vue3 support

packages/overlayscrollbars-vue/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": [["@vue/babel-plugin-jsx"]]
+}

packages/overlayscrollbars-vue/README.md

@@ -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)
+
 ```
 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
+export default {
-Vue.component('overlay-scrollbars', OverlayScrollbarsComponent);
+  name: "app",
-
-// local registration
-new Vue({
-  el: '#app',
   components: {
-    'overlay-scrollbars': OverlayScrollbarsComponent
+    OverlayScrollbars: OverlayScrollbarsComponent,
-  }
+  },
-});
+};
 ```
 
 #### Template
+
 After the registration you can use it in templates like:
+
 ```html
-<overlay-scrollbars>
+<!-- PascalCase -->
-  example content
+<OverlayScrollbars>example content</OverlayScrollbars>
-</overlay-scrollbars>
+<!-- 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 
+<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

packages/overlayscrollbars-vue/build.js

@@ -1,152 +1,183 @@
-const packageName = 'overlayscrollbars-vue';
+const packageName = "overlayscrollbars-vue";
-const rollupUmdName = 'OverlayScrollbarsVue';
+const rollupUmdName = "OverlayScrollbarsVue";
 const filesInfo = {
-    fileName: packageName,
+  fileName: packageName,
-    srcFolder: './src',
+  srcFolder: "./src",
-    distFolder: './dist',
+  distFolder: "./dist",
-    typingsFolder: './dist/types',
+  typingsFolder: "./dist/types",
-    exampleFolder: './example',
+  exampleFolder: "./example",
-    tsconfigJsonPath: './tsconfig.json',
+  tsconfigJsonPath: "./tsconfig.json",
-    packageJsonPath: './package.json',
+  packageJsonPath: "./package.json",
-    cache: []
+  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 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 path = require("path");
-const sh = require('shelljs');
+const sh = require("shelljs");
-const chalk = require('chalk');
+const chalk = require("chalk");
-const gulp = require('gulp');
+const gulp = require("gulp");
-const rollup = require('rollup');
+const rollup = require("rollup");
-const rollupCommonJs = require('rollup-plugin-commonjs');
+const rollupCommonJs = require("rollup-plugin-commonjs");
-const rollupTypeScript = require('rollup-plugin-typescript2');
+const rollupTypeScript = require("rollup-plugin-typescript2");
-const rollupResolve = require('rollup-plugin-node-resolve');
+const rollupResolve = require("rollup-plugin-node-resolve");
-const rollupVue = require('rollup-plugin-vue');
+const { babel } = require("@rollup/plugin-babel");
 const rollupInputConfig = {
-    input: `${filesInfo.srcFolder}/index.ts`,
+  input: `${filesInfo.srcFolder}/index.ts`,
-    external: [...Object.keys(packageJson.devDependencies), ...Object.keys(packageJson.peerDependencies)],
+  external: [
-    plugins: [
+    "vite",
-        rollupResolve(),
+    "vue/compiler-sfc",
-        rollupCommonJs(),
+    "@vue/compiler-sfc",
-        rollupVue({ defaultLang: 'ts' })
+    ...Object.keys(packageJson.devDependencies),
-    ]
+    ...Object.keys(packageJson.peerDependencies),
+  ],
+  plugins: [
+    rollupResolve(),
+    rollupCommonJs(),
+    babel({ babelHelpers: "bundled", extensions }),
+  ],
 };
 const rollupOutputConfig = {
-    exports: 'named',
+  exports: "named",
-    sourcemap: true
+  sourcemap: true,
 };
 
+sh.echo(chalk.cyanBright("Start building:"));
 
-
+gulp.task("prepare", function (done) {
-
+  sh.echo(`> Removing ${filesInfo.distFolder}`);
-sh.echo(chalk.cyanBright('Start building:'));
+  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) {
+gulp.task("tsconfigJson", function (done) {
-    sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
+  sh.echo(`> Prepare ${filesInfo.tsconfigJsonPath}`);
-    let newTsconfigJson = {
+  let newTsconfigJson = {
-        ...tsconfigJson,
+    ...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,
+          target: "es5",
-            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);
+
+    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) {
+gulp.task("example", function (done) {
-    sh.echo(`> Prepare ${filesInfo.packageJsonPath}`);
+  sh.echo();
-    let newPackageJson = {
+  sh.echo(
-        ...packageJson,
+    chalk.cyanBright(
-        ...packagePaths,
+      `Copy to example → ${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`
-        name: packageName,
+    )
-        files: [
+  );
-            path.normalize(filesInfo.srcFolder),
+  sh.mkdir(
-            path.normalize(filesInfo.distFolder)
+    "-p",
-        ]
+    `${filesInfo.exampleFolder}/node_modules/${filesInfo.fileName}`
-    };
+  );
-    sh.ShellString(JSON.stringify(newPackageJson, null, 4)).to(filesInfo.packageJsonPath);
+  sh.cp(
-    done();
+    "-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) {
+gulp.series("prepare", "tsconfigJson", "packageJson", "rollup", "example")();
-    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')();

packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.esm.js

@@ -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({
+var OverlayScrollbarsComponent = defineComponent({
-    name: 'overlay-scrollbars',
+  name: "OverlayScrollbars",
-    props: {
+  props: {
-        options: {
+    options: {
-            type: Object
+      type: Object
-        },
-        extensions: {
-            type: [String, Array, Object]
-        }
     },
-    methods: {
+    extensions: {
-        osInstance() {
+      type: [String, Array, Object]
-            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;
-        }
     }
-}) {
-    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;
+  data() {
-    var _h = _vm.$createElement;
+    return {};
-    var _c = _vm._self._c || _h;
+  },
-    return _c("div", { staticClass: "os-scrollbar os-scrollbar-vertical" }, [
+
-      _c("div", { staticClass: "os-scrollbar-track" }, [
+  setup(props, {
-        _c("div", { staticClass: "os-scrollbar-handle" })
+    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 */
+export { OverlayScrollbarsComponent };
-  
-  /* 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 };
 //# sourceMappingURL=overlayscrollbars-vue.esm.js.map

packages/overlayscrollbars-vue/dist/overlayscrollbars-vue.js

@@ -1,255 +1,89 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('overlayscrollbars'), require('vue')) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('overlayscrollbars')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'overlayscrollbars', 'vue'], factory) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'overlayscrollbars'], factory) :
-    (global = global || self, factory(global.OverlayScrollbarsVue = {}, global.OverlayScrollbars, global.Vue));
+  (global = global || self, factory(global.OverlayScrollbarsVue = {}, global.Vue, global.OverlayScrollbars));
-}(this, (function (exports, OverlayScrollbars, Vue) { 'use strict';
+}(this, (function (exports, vue, OverlayScrollbars) { 'use strict';
 
-    OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
+  OverlayScrollbars = OverlayScrollbars && Object.prototype.hasOwnProperty.call(OverlayScrollbars, 'default') ? OverlayScrollbars['default'] : OverlayScrollbars;
-    Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
 
-    /*! *****************************************************************************
+  var OverlayScrollbarsComponent = vue.defineComponent({
-    Copyright (c) Microsoft Corporation. All rights reserved.
+    name: "OverlayScrollbars",
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    props: {
-    this file except in compliance with the License. You may obtain a copy of the
+      options: {
-    License at http://www.apache.org/licenses/LICENSE-2.0
+        type: Object
-
-    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" })
-          ])
-        ])
       },
-      function() {
+      extensions: {
-        var _vm = this;
+        type: [String, Array, Object]
-        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" })
-          ])
-        ])
       }
-    ];
+    },
-    __vue_render__._withStripped = true;
+    data: function () {
-
+      return {};
-      /* style */
+    },
-      const __vue_inject_styles__ = undefined;
+    setup: function (props, _a) {
-      /* scoped */
+      var slots = _a.slots,
-      const __vue_scope_id__ = undefined;
+          expose = _a.expose;
-      /* module identifier */
+      var osInstance = vue.ref(null);
-      const __vue_module_identifier__ = undefined;
+      var osTargetRef = vue.ref();
-      /* functional template */
+      expose({
-      const __vue_is_functional_template__ = false;
+        osInstance: function () {
-      /* style inject */
+          return osInstance.value;
-      
+        },
-      /* style inject SSR */
+        osTarget: function () {
-      
+          return this.$el || null;
-      /* 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__);
         }
-    };
+      });
+      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__;
+        return vue.createVNode("div", {
-    exports.OverlayScrollbarsPlugin = OverlayScrollbarsPlugin;
+          "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/types/OverlayScrollbarsComponent.d.ts

@@ -1,13 +1,18 @@
-import OverlayScrollbars from 'overlayscrollbars';
+import { PropType } from "vue";
-export interface OverlayScrollbarsComponentData {
+import OverlayScrollbars from "overlayscrollbars";
-}
+declare const _default: import("vue").DefineComponent<{
-export interface OverlayScrollbarsComponentMethods {
+    options: {
-    osInstance(): OverlayScrollbars | null;
+        type: PropType<OverlayScrollbars.Options>;
-    osTarget(): HTMLDivElement | null;
+    };
-}
+    extensions: {
-export interface OverlayScrollbarsComponentComputed {
+        type: PropType<OverlayScrollbars.Extensions>;
-}
+    };
-export interface OverlayScrollbarsComponentProps {
+}, () => 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: OverlayScrollbars.Options;
+    options: {
-    extensions: OverlayScrollbars.Extensions;
+        type: PropType<OverlayScrollbars.Options>;
-}
+    };
+    extensions: {
+        type: PropType<OverlayScrollbars.Extensions>;
+    };
+}>>, {}>;
+export default _default;

packages/overlayscrollbars-vue/dist/types/OverlayScrollbarsComponent.vue.d.ts

@@ -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

@@ -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

@@ -1,3 +1 @@
-export * from './OverlayScrollbarsPlugin';
+export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
-export * from './OverlayScrollbarsComponent';
-export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';

packages/overlayscrollbars-vue/example/.browserslistrc

@@ -1,2 +0,0 @@
-> 1%
-last 2 versions

packages/overlayscrollbars-vue/example/.eslintrc.cjs

@@ -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

@@ -1,19 +1,26 @@
-.DS_Store
+# Logs
-node_modules
+logs
-/dist
+*.log
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
 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

@@ -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
+### Compile and Hot-Reload for Development
-```
+
-npm run serve
+```sh
+npm run dev
 ```
 
-### Compiles and minifies for production
+### Type-Check, Compile and Minify for Production
-```
+
+```sh
 npm run build
 ```
 
-### Run your tests
+### Lint with [ESLint](https://eslint.org/)
-```
-npm run test
-```
 
-### 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

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

packages/overlayscrollbars-vue/example/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/overlayscrollbars-vue/example/index.html

@@ -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.json

@@ -1,24 +1,31 @@
 {
   "name": "example",
-  "version": "0.1.0",
+  "version": "0.0.0",
-  "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "vue-cli-service build",
+    "build": "vue-tsc --noEmit && vite build",
-    "lint": "vue-cli-service lint"
+    "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",
+    "@rushstack/eslint-patch": "^1.1.0",
-    "@vue/cli-plugin-typescript": "^3.12.1",
+    "@types/node": "^16.11.27",
-    "@vue/cli-service": "^3.12.1",
+    "@vitejs/plugin-vue": "^2.3.1",
-    "typescript": "^3.8.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "@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

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

packages/overlayscrollbars-vue/example/public/index.html

@@ -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

@@ -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]) }"
+              @click="
-            >Scroll</button>
+                (event) => {
-            <button @click="() => { this.onBtnChangeOptions.call(this) }">Change Options</button>
+                  this.onBtnScrollRandom.call(this, event, [
-            <button @click="() => { this.onBtnChangeContent.call(this) }">Change Content</button>
+                    this.$refs.osComponentRef1,
-            <button @click="() => { this.onBtnLog.call(this) }">Log</button>
+                    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 type OverlayScrollbars from "overlayscrollbars";
-import OverlayScrollbars from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
-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>({
+export default {
-  name: 'app',
+  name: "app",
-  data: function () {
+  components: {
+    OverlayScrollbars: OverlayScrollbarsComponent,
+  },
+  data() {
     return {
-      framework: 'Vue',
+      framework: "Vue",
-      customClassName: 'custom-class-name-test',
+      customClassName: "custom-class-name-test",
-      componentClass: 'OverlayScrollbarsComponent',
+      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.',
+      loremIpsumLong:
-      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.',
+        "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.",
-      loremIpsumShort: 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.',
+      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({
+              osInstance.scrollStop().scroll(
-                x: Math.floor(Math.random() * osInstance.scroll().max.x + 0),
+                {
-                y: Math.floor(Math.random() * osInstance.scroll().max.y + 0)
+                  x: Math.floor(Math.random() * osInstance.scroll().max.x + 0),
-              }, 1000, 'easeOutElastic');
+                  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("Instance:");
-      console.log((this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osInstance());
+      console.log(
-      console.log('Target:');
+        (
-      console.log((this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osTarget());
+          this.$refs.osComponentRef1 as typeof OverlayScrollbarsComponent
-      console.log('');
+        ).osInstance()
+      );
+      console.log("Target:");
+      console.log(
+        (this.$refs.osComponentRef1 as OverlayScrollbarsComponent).osTarget()
+      );
+      console.log("");
       console.log(`== ${this.componentClass} (2) ==`);
-      console.log('Instance:');
+      console.log("Instance:");
-      console.log((this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osInstance());
+      console.log(
-      console.log('Target:');
+        (this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osInstance()
-      console.log((this.$refs.osComponentRef2 as OverlayScrollbarsComponent).osTarget());
+      );
+      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>

packages/overlayscrollbars-vue/example/src/main.ts

@@ -1,20 +1,14 @@
 import "overlayscrollbars/css/OverlayScrollbars.css";
-import './styles.css';
+import { createApp } from "vue";
-import Vue from 'vue';
+import OverlayScrollbars from "overlayscrollbars";
-import App from './App.vue';
+import App from "./App.vue";
-import OverlayScrollbars from 'overlayscrollbars';
-import { OverlayScrollbarsPlugin } from "overlayscrollbars-vue";
 
-Vue.config.productionTip = false
+const app = createApp(App);
 
-Vue.use(OverlayScrollbarsPlugin);
+app.mount("#app");
-
-new Vue({
-    render: h => h(App),
-}).$mount('#app')
 
 OverlayScrollbars(document.body, {
-    nativeScrollbarsOverlaid: {
+  nativeScrollbarsOverlaid: {
-        initialize: false
+    initialize: false,
-    }
+  },
 });

packages/overlayscrollbars-vue/example/src/shims-tsx.d.ts

@@ -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

@@ -1,4 +0,0 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
-}

packages/overlayscrollbars-vue/example/src/styles.css

@@ -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

@@ -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": [
+    "esModuleInterop": true,
-      "webpack-env"
-    ],
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "src/*"
+    }
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
   },
-  "include": [
+
-    "src/**/*.ts",
+  "references": [
-    "src/**/*.tsx",
+    {
-    "src/**/*.vue",
+      "path": "./tsconfig.vite-config.json"
-    "tests/**/*.ts",
+    }
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
   ]
 }

packages/overlayscrollbars-vue/example/tsconfig.vite-config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

packages/overlayscrollbars-vue/example/tslint.json

@@ -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

@@ -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

@@ -1,4 +0,0 @@
-module.exports = {
-	lintOnSave: false,
-	publicPath: '/OverlayScrollbars/frameworks/vue/'
-}

packages/overlayscrollbars-vue/package.json

@@ -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-typescript2": "^0.31.2",
-        "rollup-plugin-vue": "^5.1.6",
+        "rollup-plugin-vue": "^6.0.0",
         "shelljs": "0.7.7",
-        "typescript": "^3.8.3",
+        "typescript": "^4.4.3",
-        "vue": "^2.6.11",
+        "vue": "^3.0.0"
-        "vue-template-compiler": "^2.6.11"
     },
     "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

@@ -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

@@ -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

@@ -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

@@ -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 +1 @@
-export * from './OverlayScrollbarsPlugin';
+export { default as OverlayScrollbarsComponent } from "./OverlayScrollbarsComponent";
-export * from './OverlayScrollbarsComponent';
-export { default as OverlayScrollbarsComponent } from './OverlayScrollbarsComponent.vue';

packages/overlayscrollbars-vue/src/shim.d.ts

@@ -1,4 +1,5 @@
-declare module '*.vue' {
+declare module "*.vue" {
-    import Vue from 'vue';
+  import { defineComponent } from "vue";
-    export default Vue;
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
 }

packages/overlayscrollbars-vue/tsconfig.json

@@ -8,8 +8,7 @@
         "target": "es5",
         "sourceMap": true,
         "inlineSources": true,
-        "jsx": "react",
+        "jsx": "preserve",
-        "jsxFactory": "createElement",
         "declaration": true,
         "declarationDir": "./dist/types",
         "noImplicitAny": true,