From c68096a04bd5dff3367b955e986a84d7552f9bfb Mon Sep 17 00:00:00 2001
From: Rene Haas <king-sora@hotmail.de>
Date: Mon, 29 Jul 2024 11:47:15 +0200
Subject: [PATCH] improve examples

---
 examples/angular/src/app/app.component.ts     |  5 +++--
 examples/angular/src/main.ts                  |  4 +++-
 examples/angular/src/styles.css               | 20 ++++++++-----------
 examples/browser/index.html                   |  2 +-
 examples/browser/script.js                    | 11 ++++++++--
 examples/browser/styles.css                   | 20 ++++++++-----------
 examples/node/index.html                      |  2 +-
 examples/node/src/script.js                   | 11 ++++++++--
 examples/node/styles.css                      | 20 ++++++++-----------
 examples/overlayscrollbars/index.html         |  2 +-
 .../src/bodyOverlayScrollbars.ts              |  6 +++++-
 examples/overlayscrollbars/src/index.ts       |  3 +++
 examples/overlayscrollbars/styles.css         | 20 ++++++++-----------
 examples/react/src/App.tsx                    |  3 ++-
 examples/react/src/index.css                  | 20 ++++++++-----------
 examples/react/src/main.tsx                   |  3 +++
 examples/solid/src/App.tsx                    |  3 ++-
 examples/solid/src/index.css                  | 20 ++++++++-----------
 examples/solid/src/index.tsx                  |  3 +++
 examples/svelte/src/App.svelte                |  3 ++-
 examples/svelte/src/app.css                   | 20 ++++++++-----------
 examples/svelte/src/main.ts                   |  3 +++
 examples/vue/src/App.vue                      |  3 ++-
 examples/vue/src/main.css                     | 20 ++++++++-----------
 examples/vue/src/main.ts                      |  3 +++
 25 files changed, 119 insertions(+), 111 deletions(-)

diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
index 443e9476..2141259a 100644
--- a/examples/angular/src/app/app.component.ts
+++ b/examples/angular/src/app/app.component.ts
@@ -16,6 +16,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
     {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     }
   ).state().destroyed;
@@ -29,7 +30,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
           OverlayScrollbars Ngx
         </a>
       </h1>
-      <section class="slot">
+      <section>
         <div
           overlay-scrollbars
           #osRef
@@ -77,7 +78,7 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
         <p class="title">Events:</p>
         <div class="items">
           <div
-            *ngFor="let observedEvent of observedEvents$ | async | keyvalue: originalOrder"
+            *ngFor="let observedEvent of observedEvents$ | async | keyvalue : originalOrder"
             [ngClass]="{ event: true, active: observedEvent.value.active }"
           >
             {{ observedEvent.key }}
diff --git a/examples/angular/src/main.ts b/examples/angular/src/main.ts
index 17a5cd4e..250c1b3b 100644
--- a/examples/angular/src/main.ts
+++ b/examples/angular/src/main.ts
@@ -1,7 +1,9 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import { AppModule } from './app/app.module';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err) => console.error(err));
diff --git a/examples/angular/src/styles.css b/examples/angular/src/styles.css
index 6c3945a2..cc7d595c 100644
--- a/examples/angular/src/styles.css
+++ b/examples/angular/src/styles.css
@@ -104,30 +104,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-ngx {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-ngx {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/browser/index.html b/examples/browser/index.html
index e9b4cf41..07ec7409 100644
--- a/examples/browser/index.html
+++ b/examples/browser/index.html
@@ -33,7 +33,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />
diff --git a/examples/browser/script.js b/examples/browser/script.js
index 5e95810b..52ea2f01 100644
--- a/examples/browser/script.js
+++ b/examples/browser/script.js
@@ -1,4 +1,11 @@
-const { OverlayScrollbars } = OverlayScrollbarsGlobal;
+const { OverlayScrollbars, ClickScrollPlugin } = OverlayScrollbarsGlobal;
 
-OverlayScrollbars(document.body, {});
+// optional: use the ClickScrollPlugin to make the option "scrollbars.clickScroll: true" available
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
+OverlayScrollbars(document.body, {
+  scrollbars: {
+    clickScroll: true,
+  },
+});
 OverlayScrollbars(document.getElementById('target'), {});
diff --git a/examples/browser/styles.css b/examples/browser/styles.css
index fad64324..f405b1a7 100644
--- a/examples/browser/styles.css
+++ b/examples/browser/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/node/index.html b/examples/node/index.html
index 18cd9df3..b72f34ed 100644
--- a/examples/node/index.html
+++ b/examples/node/index.html
@@ -21,7 +21,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />
diff --git a/examples/node/src/script.js b/examples/node/src/script.js
index 09fe939c..10ee9d7c 100644
--- a/examples/node/src/script.js
+++ b/examples/node/src/script.js
@@ -1,5 +1,12 @@
 import 'overlayscrollbars/overlayscrollbars.css';
-import { OverlayScrollbars } from 'OverlayScrollbars';
+import { OverlayScrollbars, ClickScrollPlugin } from 'OverlayScrollbars';
 
-OverlayScrollbars(document.body, {});
+// optional: use the ClickScrollPlugin to make the option "scrollbars.clickScroll: true" available
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
+OverlayScrollbars(document.body, {
+  scrollbars: {
+    clickScroll: true,
+  },
+});
 OverlayScrollbars(document.getElementById('target'), {});
diff --git a/examples/node/styles.css b/examples/node/styles.css
index fad64324..f405b1a7 100644
--- a/examples/node/styles.css
+++ b/examples/node/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/overlayscrollbars/index.html b/examples/overlayscrollbars/index.html
index 1c0930bb..e6c74399 100644
--- a/examples/overlayscrollbars/index.html
+++ b/examples/overlayscrollbars/index.html
@@ -21,7 +21,7 @@ <h1>
             OverlayScrollbars
           </a>
         </h1>
-        <section class="slot">
+        <section>
           <div id="target" class="overlayscrollbars" data-overlayscrollbars-initialize>
             <div id="targetContent" class="logo">
               <img alt="Logo" src="logo.png" width="333" height="333" />
diff --git a/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts b/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts
index 0dc9461c..51bfe03d 100644
--- a/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts
+++ b/examples/overlayscrollbars/src/bodyOverlayScrollbars.ts
@@ -10,7 +10,11 @@ const initBodyOverlayScrollbars = (force?: boolean) =>
         body: force ? false : null,
       },
     },
-    {}
+    {
+      scrollbars: {
+        clickScroll: true,
+      },
+    }
   ).state().destroyed;
 
 const toggleBodyOverlayScrollbarsSection = document.querySelector(
diff --git a/examples/overlayscrollbars/src/index.ts b/examples/overlayscrollbars/src/index.ts
index 9e3c2dc0..7ffa9e33 100644
--- a/examples/overlayscrollbars/src/index.ts
+++ b/examples/overlayscrollbars/src/index.ts
@@ -1,3 +1,6 @@
 import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import './actions.ts';
 import './bodyOverlayScrollbars.ts';
+
+OverlayScrollbars.plugin(ClickScrollPlugin);
diff --git a/examples/overlayscrollbars/styles.css b/examples/overlayscrollbars/styles.css
index fad64324..f405b1a7 100644
--- a/examples/overlayscrollbars/styles.css
+++ b/examples/overlayscrollbars/styles.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index 994d8e61..ab1a8ad3 100644
--- a/examples/react/src/App.tsx
+++ b/examples/react/src/App.tsx
@@ -31,6 +31,7 @@ const App = () => {
     options: {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     },
   });
@@ -86,7 +87,7 @@ const App = () => {
             OverlayScrollbars React
           </a>
         </h1>
-        <section className="slot">
+        <section>
           {overlayScrollbarsApplied ? (
             <OverlayScrollbarsComponent
               className="overlayscrollbars-react"
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
index 7ea5c746..939b477e 100644
--- a/examples/react/src/index.css
+++ b/examples/react/src/index.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-react {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-react {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
index b2a71e54..686470e4 100644
--- a/examples/react/src/main.tsx
+++ b/examples/react/src/main.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import 'overlayscrollbars/overlayscrollbars.css';
 import './index.css';
 import App from './App';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
diff --git a/examples/solid/src/App.tsx b/examples/solid/src/App.tsx
index b3613ae4..2130efb7 100644
--- a/examples/solid/src/App.tsx
+++ b/examples/solid/src/App.tsx
@@ -30,6 +30,7 @@ const App: Component = () => {
     options: {
       scrollbars: {
         theme: 'os-theme-light',
+        clickScroll: true,
       },
     },
   });
@@ -81,7 +82,7 @@ const App: Component = () => {
             OverlayScrollbars Solid
           </a>
         </h1>
-        <section class="slot">
+        <section>
           {overlayScrollbarsApplied() ? (
             <OverlayScrollbarsComponent
               class="overlayscrollbars-solid"
diff --git a/examples/solid/src/index.css b/examples/solid/src/index.css
index ecd06295..d2a9816c 100644
--- a/examples/solid/src/index.css
+++ b/examples/solid/src/index.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-solid {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-solid {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/solid/src/index.tsx b/examples/solid/src/index.tsx
index 83e5437b..dada5476 100644
--- a/examples/solid/src/index.tsx
+++ b/examples/solid/src/index.tsx
@@ -1,8 +1,11 @@
 /* @refresh reload */
 import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import { render } from 'solid-js/web';
 
 import './index.css';
 import App from './App';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 render(() => <App />, document.getElementById('root') as HTMLElement);
diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
index faa4b6f0..d30971dc 100644
--- a/examples/svelte/src/App.svelte
+++ b/examples/svelte/src/App.svelte
@@ -61,6 +61,7 @@
       {
         scrollbars: {
           theme: 'os-theme-light',
+          clickScroll: true,
         },
       }
     ).state().destroyed;
@@ -109,7 +110,7 @@
       OverlayScrollbars Svelte
     </a>
   </h1>
-  <section class="slot">
+  <section>
     {#if useOverlayScrollbars}
       <OverlayScrollbarsComponent
         bind:this={osRef}
diff --git a/examples/svelte/src/app.css b/examples/svelte/src/app.css
index 5353e328..9d1386e0 100644
--- a/examples/svelte/src/app.css
+++ b/examples/svelte/src/app.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-svelte {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-svelte {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/svelte/src/main.ts b/examples/svelte/src/main.ts
index 3d7644cb..84ce95d2 100644
--- a/examples/svelte/src/main.ts
+++ b/examples/svelte/src/main.ts
@@ -1,7 +1,10 @@
 import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import './app.css';
 import App from './App.svelte';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 const app = new App({
   target: document.getElementById('app') as HTMLElement,
 });
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index 2d302d8f..75660435 100644
--- a/examples/vue/src/App.vue
+++ b/examples/vue/src/App.vue
@@ -23,6 +23,7 @@ const [initBodyOverlayScrollbars, getBodyOverlayScrollbarsInstance] = useOverlay
   options: {
     scrollbars: {
       theme: 'os-theme-light',
+      clickScroll: true,
     },
   },
 });
@@ -71,7 +72,7 @@ onMounted(() => initBodyOverlayScrollbars(document.body));
         OverlayScrollbars Vue
       </a>
     </h1>
-    <section class="slot">
+    <section>
       <OverlayScrollbarsComponent
         v-if="overlayScrollbarsApplied"
         class="overlayscrollbars-vue"
diff --git a/examples/vue/src/main.css b/examples/vue/src/main.css
index 387afb5a..e5519b46 100644
--- a/examples/vue/src/main.css
+++ b/examples/vue/src/main.css
@@ -102,30 +102,26 @@ img {
   height: 100%;
 }
 
-.slot {
-  border-radius: 6px;
+.overlayscrollbars-vue {
   width: 16rem;
   height: 16rem;
   margin: 0 auto;
-  flex: none;
-}
-
-.overlayscrollbars-vue {
-  width: 100%;
-  height: 100%;
+  resize: both;
   overflow: auto;
-  border: 2px solid var(--foreground-color);
   border-radius: 6px;
+  border: 2px solid var(--foreground-color);
   box-shadow: rgb(var(--foreground-color-rgb) / 0.14) 0 0.875rem 3.125rem;
 }
 
 .logo {
-  width: 180%;
-  height: 180%;
+  width: 32rem;
+  height: 32rem;
   padding: 1rem;
-  display: inline-block;
+  display: block;
   pointer-events: none;
   user-select: none;
+  backdrop-filter: brightness(88%) contrast(1.012);
+  margin: 0 auto;
 }
 
 .title {
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
index 1e032082..7a491a19 100644
--- a/examples/vue/src/main.ts
+++ b/examples/vue/src/main.ts
@@ -1,8 +1,11 @@
 import 'overlayscrollbars/overlayscrollbars.css';
 import { createApp } from 'vue';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import App from './App.vue';
 
 import './main.css';
 
+OverlayScrollbars.plugin(ClickScrollPlugin);
+
 const app = createApp(App);
 app.mount('#app');