Change project name, Nuxt compatability, update Locomotive Scroll v…

…ersion, version semantic change.

v1.0.0-alpha.1.

.github/dependabot.yml

@@ -5,16 +5,16 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 2
 
   - package-ecosystem: "npm"
     directory: "/lib"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 2
 
   - package-ecosystem: "npm"
     directory: "/docs"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 2

.github/workflows/publish.yml

@@ -46,7 +46,7 @@ jobs:
     timeout-minutes: 10
     environment:
       name: npm
-      url: https://www.npmjs.com/package/vuecomotive-scroll
+      url: https://www.npmjs.com/package/potiah
     steps:
       - uses: actions/download-artifact@v3
         with:

README.md

@@ -1,27 +1,29 @@
 <p align="center">
-  <a href="https://vuecomotive.somespecial.one" target="_blank" rel="noopener noreferrer">
-    <img width="240" src="https://raw.githubusercontent.com/somespecialone/vuecomotive-scroll/master/docs/public/logo.svg" alt="Vuecomotive logo">
+  <a href="https://potiah.somespecial.one" target="_blank" rel="noopener noreferrer">
+    <img width="240" src="https://raw.githubusercontent.com/somespecialone/potiah/master/docs/public/logo.svg" alt="potiah logo">
   </a>
-  <h1 align="center">Vuecomotive Scroll</h1>
+  <h1 align="center">Potiah</h1>
 </p>
 
 [![Made in Ukraine](https://img.shields.io/badge/made_in-ukraine-ffd700.svg?labelColor=0057b7)](https://stand-with-ukraine.pp.ua)
-[![license](https://img.shields.io/github/license/somespecialone/vuecomotive-scroll)](https://github.com/somespecialone/vuecomotive-scroll/blob/master/LICENSE)
-[![npm](https://img.shields.io/npm/v/vuecomotive-scroll)](https://www.npmjs.com/package/vuecomotive-scroll)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/vuecomotive-scroll)
-[![Docs](https://github.com/somespecialone/vuecomotive-scroll/actions/workflows/docs.yml/badge.svg)](https://github.com/somespecialone/vuecomotive-scroll/actions/workflows/docs.yml)
-[![Publish](https://github.com/somespecialone/vuecomotive-scroll/actions/workflows/publish.yml/badge.svg)](https://github.com/somespecialone/vuecomotive-scroll/actions/workflows/publish.yml)
+[![license](https://img.shields.io/github/license/somespecialone/potiah)](https://github.com/somespecialone/potiah/blob/master/LICENSE)
+[![npm](https://img.shields.io/npm/v/potiah)](https://www.npmjs.com/package/potiah)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/potiah)](https://bundlephobia.com/package/potiah)
+[![Docs](https://github.com/somespecialone/potiah/actions/workflows/docs.yml/badge.svg)](https://github.com/somespecialone/potiah/actions/workflows/docs.yml)
+[![Publish](https://github.com/somespecialone/potiah/actions/workflows/publish.yml/badge.svg)](https://github.com/somespecialone/potiah/actions/workflows/publish.yml)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)
 
-Vuecomotive Scroll is a thin [Vue.js](https://vuejs.org) wrapper for
-precious [Locomotive Scroll v5](https://github.com/locomotivemtl/locomotive-scroll) 🚂.
+_Potiah_ (pronounced `/pot'jʌɦ/`, means _train_ in Ukrainian) is a thin [Vue.js](https://vuejs.org) wrapper for
+precious [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) 🚂.
 
-It utilizes native `Vue` features such as components and composables to give maximum control over `LocomotiveScroll` API
-to developer and make it easier to integrate it into a `Vue` app.
+> _"It utilizes native `Vue` features such as components and composables to give maximum control over `LocomotiveScroll`
+> API to developer and make it easier to integrate it into a `Vue` app."_
+>
+> ChatGPT
 
-[Documentation 📖](https://vuecomotive.somespecial.one)
+[Documentation 📖](https://potiah.somespecial.one)
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/somespecialone/vuecomotive-scroll/tree/master/demo/?file=src%2FApp.vue)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/somespecialone/potiah/tree/master/demo/?file=src%2FApp.vue)
 
 ---
 
@@ -36,59 +38,60 @@ So there might be some breaking changes in the future unless stable (first major
 ### Bundler / package manager
 
 ```sh
-npm install vuecomotive-scroll
+npm install potiah
 ```
 
 ```sh
-pnpm add vuecomotive-scroll
+pnpm add potiah
 ```
 
 ```sh
-yarn add vuecomotive-scroll
+yarn add potiah
 ```
 
 ### Direct Download / CDN
 
 Specified version
 
 ```html
-<script src="https://unpkg.com/vuecomotive-scroll@0.2.2"></script>
+<script src="https://unpkg.com/potiah@1.0.0-alpha.1"></script>
 ```
 
 Latest
 
 ```html
-<script src="https://unpkg.com/vuecomotive-scroll"></script>
+<script src="https://unpkg.com/potiah"></script>
 ```
 
 Also note, that you need to load [lenis styles](https://github.com/studio-freight/lenis#considerations) from CDN too
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/vuecomotive-scroll/dist/lenis.css">
+<link rel="stylesheet" href="https://unpkg.com/potiah/dist/lenis.css">
 ```
 
 ## Basic usage
 
 ### Setup plugin
 
 ```js
-import { createApp } from 'vue'
-
-import 'vuecomotive-scroll/dist/lenis.css' // if you install trough package manager  
-import createVuecomotiveScroll from 'vuecomotive-scroll'
+import 'potiah/dist/lenis.css' // if you install trough package manager  
+import createPotiah from 'potiah'
 
 import App from './App.vue'
 
 const app = createApp(App)
-const scroll = createVuecomotiveScroll()
 
-app.use(scroll)
+app.use(createPotiah())
 app.mount('#app')
 ```
 
 ### Create view
 
 ```vue
+<script lang="ts">
+import { ScrollView } from 'potiah'
+</script>
+
 <template>
   <ScrollView root :duration="1.7">
     <!-- your components/content-->
@@ -99,6 +102,10 @@ app.mount('#app')
 ### Place scroll components
 
 ```vue
+<script lang="ts">
+import { ScrollView, ScrollComponent } from 'potiah'
+</script>
+
 <template>
   <ScrollView root :duration="1.7">
     <ScrollComponent class="first-scroll-component" :speed="0.2" css-progress>
@@ -113,7 +120,7 @@ app.mount('#app')
 
 ```vue
 <script lang="ts">
-import { useScroll } from 'vuecomotive-scroll'
+import { useScroll } from 'potiah'
 
 const { scrollTo } = useScroll()
 
@@ -132,7 +139,7 @@ function handleClickOnSomeElement({target}) {
   attributes from [Locomotive Scroll element](https://scroll.locomotive.ca/docs/#/attributes).
 * `useScroll` - composable that returns `scroll`, `scrollTo` function, refs with scroll data.
 
-> For all details please visit [Documentation 📖](https://vuecomotive.somespecial.one)
+> For all details please visit [Documentation 📖](https://potiah.somespecial.one)
 
 ## Licences:
 

demo/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Demo VuecomotiveScroll</title>
+  <title>Demo Potiah</title>
 </head>
 <body>
 <div id="app"></div>

demo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vuecomotive-scroll/demo",
+  "name": "@potiah/demo",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -9,7 +9,7 @@
   "dependencies": {
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
-    "vuecomotive-scroll": "latest"
+    "potiah": "latest"
   },
   "devDependencies": {
     "@types/node": "^18.16.17",

demo/src/main.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
-import 'vuecomotive-scroll/dist/lenis.css'
-import createVuecomotiveScroll from 'vuecomotive-scroll'
+import 'potiah/dist/lenis.css'
+import createPotiah from 'potiah'
 
 import App from './App.vue'
 import HomeRoute from '@/pages/HomeRoute.vue'
@@ -25,7 +25,7 @@ const router = createRouter({
   ]
 })
 
-app.use(createVuecomotiveScroll())
+app.use(createPotiah())
 app.use(router)
 
 app.mount('#app')

demo/src/pages/HomeRoute.vue

@@ -3,7 +3,7 @@
 
 import { onMounted, ref, watch } from 'vue'
 
-import { useScroll, ScrollView, ScrollComponent } from 'vuecomotive-scroll'
+import { useScroll, ScrollView, ScrollComponent } from 'potiah'
 
 const flag = ref(true)
 const duration = ref(1.4)
@@ -24,11 +24,12 @@ onMounted(() => {
 })
 
 function handleMounted() {}
+
 function handleInsersect(d) {}
 </script>
 
 <template>
-  <ScrollView class="home-route" :duration="duration" css-direction>
+  <ScrollView :duration="duration" css-direction root>
     <header>
       <a href="#top">top</a>
       <a href="#zero1">zero1</a>
@@ -67,11 +68,6 @@ header {
   gap: 1em;
 }
 
-.home-route {
-  height: 100vh;
-  overflow: hidden;
-}
-
 .zero {
   height: 30vh;
   background-color: coral;

demo/src/pages/LazyRoute.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useScroll, ScrollView, ScrollComponent } from 'vuecomotive-scroll'
+import { useScroll, ScrollView, ScrollComponent } from 'potiah'
 </script>
 
 <template>
-  <ScrollView class="lazy-route" horizontal>
+  <ScrollView class="lazy-route" horizontal css-progress>
     <ScrollComponent class="scroll-el-1">Scroll element #1</ScrollComponent>
     <ScrollComponent class="scroll-el-2" :speed="-0.5">Scroll element #2</ScrollComponent>
     <ScrollComponent class="scroll-el-3">Scroll element #3</ScrollComponent>

docs/.vitepress/config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress'
 import pkg from '../../lib/package.json'
 
 export default defineConfig({
-  title: 'Vuecomotive',
+  title: 'Potiah',
   description: 'Vue.js wrapper for Locomotive Scroll',
   appearance: 'dark',
   lastUpdated: true,
@@ -17,9 +17,9 @@ export default defineConfig({
       { text: 'Core', link: '/core/scroll' },
       {
         text: 'Playground',
-        link: 'https://stackblitz.com/github/somespecialone/vuecomotive-scroll/tree/master/demo/?file=src%2FApp.vue'
+        link: 'https://stackblitz.com/github/somespecialone/potiah/tree/master/demo/?file=src%2FApp.vue'
       },
-      { text: pkg.version, link: 'https://github.com/somespecialone/vuecomotive-scroll/releases/tag/v' + pkg.version },
+      { text: pkg.version, link: 'https://github.com/somespecialone/potiah/releases/tag/v' + pkg.version },
       { text: 'Support Ukraine', link: 'https://war.ukraine.ua/support-ukraine/' }
     ],
     sidebar: [
@@ -40,9 +40,9 @@ export default defineConfig({
         ]
       }
     ],
-    socialLinks: [{ icon: 'github', link: 'https://github.com/somespecialone/vuecomotive-scroll' }],
+    socialLinks: [{ icon: 'github', link: 'https://github.com/somespecialone/potiah' }],
     editLink: {
-      pattern: 'https://github.com/somespecialone/vuecomotive-scroll/edit/master/docs/:path',
+      pattern: 'https://github.com/somespecialone/potiah/edit/master/docs/:path',
       text: 'Edit this page on GitHub'
     }
   },

docs/.vitepress/theme/components/ScrollLayout.vue → docs/.vitepress/theme/ScrollLayout.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect, provide } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect, provide, nextTick } from 'vue'
 import { useRoute, useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
-import { ScrollView, ScrollComponent, useScroll } from 'vuecomotive-scroll'
+import { ScrollView, ScrollComponent, useScroll } from 'potiah'
 
-import HomeLogo from './HomeLogo.vue'
-import MouseIco from './MouseIco.vue'
-import ArrowIco from './ArrowIco.vue'
+import HomeLogo from './components/HomeLogo.vue'
+import MouseIco from './components/MouseIco.vue'
+import ArrowIco from './components/ArrowIco.vue'
 
-import { DEF_DUR, PROGRESS_THRESHOLD } from '../../constants'
+import { DEF_DUR, PROGRESS_THRESHOLD } from '../constants'
 
 const { Layout } = DefaultTheme
 
@@ -62,6 +62,40 @@ onMounted(() => {
 onBeforeUnmount(() => windowScrollTo && (window.scrollTo = windowScrollTo))
 
 provide('duration', duration)
+
+// animate dark <> light mode switch
+// https://github.com/vite-pwa/docs/blob/8917eccda8c13c29cd151ae91a0e398e3394eb91/.vitepress/theme/PwaLayout.vue
+const { isDark } = data
+
+function enableTransitions() {
+  return 'startViewTransition' in document && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+}
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})
 </script>
 
 <template>
@@ -124,7 +158,7 @@ provide('duration', duration)
     left: 50%;
 
     color: var(--vp-c-text-2);
-    font-size: clamp(5px, 0.6rem, 1rem);
+    font-size: 0.9vw;
     font-weight: 500;
     white-space: nowrap;
 
@@ -177,7 +211,7 @@ provide('duration', duration)
           pointer-events: none;
         }
 
-        .vuecomotive-svg {
+        .potiah-svg {
           overflow: unset;
 
           #logo-vue {

docs/.vitepress/theme/components/HomeLogo.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="vuecomotive-svg" viewBox="0 0 270 240" xmlns="http://www.w3.org/2000/svg">
+  <svg class="potiah-svg" viewBox="0 0 270 240" xmlns="http://www.w3.org/2000/svg">
     <g id="logo-rails">
       <path fill="#A4A9AD" d="m88.2465,190.11827l93.50698,0l0,6.95566l-93.50698,0l0,-6.95566z" />
       <path fill="#A4A9AD" d="m72.32737,209.83792l125.34525,0l0,6.95566l-125.34525,0l0,-6.95566z" />