rename some stuff, remove cypress bugged cypress webkit

Author: smastrom

.github/workflows/tests.yml

@@ -26,9 +26,3 @@ jobs:
               install: false
               component: true
               browser: firefox
-         - name: Cypress Webkit
-           uses: cypress-io/github-action@v5
-           with:
-              install: false
-              component: true
-              browser: webkit

cypress.config.ts

@@ -4,7 +4,6 @@ export default defineConfig({
    component: {
       video: false,
       viewportWidth: 1366,
-      experimentalWebKitSupport: true,
       viewportHeight: 768,
       devServer: {
          framework: 'vue',

demo/components/Sidebar/DemoControls.vue

@@ -26,7 +26,7 @@ watch(
 <template>
    <div class="Controls">
       <fieldset>
-         <legend>Click</legend>
+         <legend>Scroll</legend>
          <div>
             <label for="Native">
                <input
@@ -46,13 +46,13 @@ watch(
                   value="custom"
                   v-model="clickType"
                />
-               Custom JS Scroll
+               Custom JS
             </label>
          </div>
       </fieldset>
 
       <fieldset :disabled="clickType === 'custom'">
-         <legend>CSS scroll-behavior</legend>
+         <legend>scroll-behavior</legend>
          <div>
             <label for="Auto">
                <input

demo/components/Sidebar/TOC.vue

@@ -73,9 +73,9 @@ const onClick = computed(() => (clickType.value === 'native' ? setActive : custo
    position: absolute;
    left: -10px;
    right: 10px;
-   top: calc(var(--ActiveItemHeight) * var(--ActiveIndex));
+   transform: translateY(calc(var(--ActiveItemHeight) * var(--ActiveIndex)));
    background-color: #00adb538;
-   transition: top 100ms;
+   transition: transform 100ms;
    border-left: 4px solid #00adb5;
    border-radius: 0px 5px 5px 0px;
 }

demo/useFakeData.ts

@@ -1,9 +1,9 @@
 import { watch, computed, reactive } from 'vue'
 
 export function useFakeData(length = 10) {
-   const parsedStart = parseInt(sessionStorage.getItem('firstNumber') || '0')
-   const parsedEnd = parseInt(sessionStorage.getItem('lastNumber') || '0')
-   const parsedLength = parsedEnd - parsedStart + 1
+   const start = parseInt(sessionStorage.getItem('firstNumber') || '0')
+   const end = parseInt(sessionStorage.getItem('lastNumber') || '0')
+   const parsedLength = end - start + 1
 
    const isMobile = window.matchMedia('(max-width: 610px)').matches
 
@@ -12,8 +12,8 @@ export function useFakeData(length = 10) {
 
    const sections = reactive(
       Array.from({ length: parsedLength <= 1 ? length : parsedLength }, (_, index) => ({
-         id: `title_${parsedStart + index}`,
-         title: `${parsedStart + index} `.repeat(6).toUpperCase(),
+         id: `title_${start + index}`,
+         title: `${start + index} `.repeat(6).toUpperCase(),
          text: 'Text '.repeat(getInt(minText, maxText)),
       }))
    )

package.json

@@ -51,12 +51,11 @@
    },
    "devDependencies": {
       "@rollup/plugin-terser": "^0.4.3",
-      "@types/node": "^20.6.0",
+      "@types/node": "^20.6.2",
       "@vitejs/plugin-vue": "^4.3.4",
       "animated-scroll-to": "^2.3.0",
       "cypress": "^13.2.0",
       "husky": "^8.0.3",
-      "playwright-webkit": "^1.38.0",
       "prettier": "^3.0.3",
       "typescript": "^5.2.2",
       "vite": "4.4.9",