style: fix eslint issues

packages/vaul-vue/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],

packages/vaul-vue/src/controls.ts

@@ -121,6 +121,7 @@ export function useDrawer(): DrawerRootContext {
     onSnapPointChange
   })
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { restorePositionSetting } = usePositionFixed({
     isOpen,
     modal: true,

packages/vaul-vue/src/helpers.ts

@@ -1,70 +1,70 @@
 interface Style {
-  [key: string]: string;
+  [key: string]: string
 }
 
-const cache = new WeakMap();
+const cache = new WeakMap()
 
 export function isInView(el: HTMLElement): boolean {
-  const rect = el.getBoundingClientRect();
+  const rect = el.getBoundingClientRect()
 
-  if (!window.visualViewport) return false;
+  if (!window.visualViewport) return false
 
   return (
     rect.top >= 0 &&
     rect.left >= 0 &&
     // Need + 40 for safari detection
     rect.bottom <= window.visualViewport.height - 40 &&
     rect.right <= window.visualViewport.width
-  );
+  )
 }
 
 export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
-  if (!el || !(el instanceof HTMLElement) || !styles) return;
-  let originalStyles: Style = {};
+  if (!el || !(el instanceof HTMLElement) || !styles) return
+  const originalStyles: Style = {}
 
   Object.entries(styles).forEach(([key, value]: [string, string]) => {
     if (key.startsWith('--')) {
-      el.style.setProperty(key, value);
-      return;
+      el.style.setProperty(key, value)
+      return
     }
 
-    originalStyles[key] = (el.style as any)[key];
-    (el.style as any)[key] = value;
-  });
+    originalStyles[key] = (el.style as any)[key]
+    ;(el.style as any)[key] = value
+  })
 
-  if (ignoreCache) return;
+  if (ignoreCache) return
 
-  cache.set(el, originalStyles);
+  cache.set(el, originalStyles)
 }
 
 export function reset(el: Element | HTMLElement | null, prop?: string) {
-  if (!el || !(el instanceof HTMLElement)) return;
-  let originalStyles = cache.get(el);
+  if (!el || !(el instanceof HTMLElement)) return
+  const originalStyles = cache.get(el)
 
   if (!originalStyles) {
-    return;
+    return
   }
 
   if (prop) {
-    (el.style as any)[prop] = originalStyles[prop];
+    ;(el.style as any)[prop] = originalStyles[prop]
   } else {
     Object.entries(originalStyles).forEach(([key, value]) => {
-      (el.style as any)[key] = value;
-    });
+      ;(el.style as any)[key] = value
+    })
   }
 }
 
 export function getTranslateY(element: HTMLElement): number | null {
-  const style = window.getComputedStyle(element);
+  const style = window.getComputedStyle(element)
   const transform =
     // @ts-ignore
-    style.transform || style.webkitTransform || style.mozTransform;
-  let mat = transform.match(/^matrix3d\((.+)\)$/);
-  if (mat) return parseFloat(mat[1].split(', ')[13]);
-  mat = transform.match(/^matrix\((.+)\)$/);
-  return mat ? parseFloat(mat[1].split(', ')[5]) : null;
+    style.transform || style.webkitTransform || style.mozTransform
+  let mat = transform.match(/^matrix3d\((.+)\)$/)
+  if (mat) return parseFloat(mat[1].split(', ')[13])
+  mat = transform.match(/^matrix\((.+)\)$/)
+  return mat ? parseFloat(mat[1].split(', ')[5]) : null
 }
 
 export function dampenValue(v: number) {
-  return 8 * (Math.log(v + 1) - 2);
+  return 8 * (Math.log(v + 1) - 2)
 }

packages/vaul-vue/src/scroll/util.ts

@@ -54,7 +54,7 @@ export function addEvent<K extends keyof GlobalEventHandlersEventMap>(
 }
 
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
-export function setStyle<T>(
+export function setStyle(
   element: HTMLElement,
   style: keyof Omit<CSSStyleDeclaration, 'length' | 'parentRule' | number | typeof Symbol.iterator>,
   value: string

playground/e2e/helpers.ts

@@ -1,28 +1,28 @@
-import { expect, Page } from '@playwright/test';
-import { ANIMATION_DURATION } from './constants';
+import { expect, Page } from '@playwright/test'
+import { ANIMATION_DURATION } from './constants'
 
 export async function openDrawer(page: Page) {
-  await expect(page.getByTestId('content')).not.toBeVisible();
-  await page.getByTestId('trigger').click();
-  await page.waitForTimeout(ANIMATION_DURATION);
-  await expect(page.getByTestId('content')).toBeVisible();
+  await expect(page.getByTestId('content')).not.toBeVisible()
+  await page.getByTestId('trigger').click()
+  await page.waitForTimeout(ANIMATION_DURATION)
+  await expect(page.getByTestId('content')).toBeVisible()
 }
 
-export async function dragWithSpeed(
-  page: Page,
-  selector: string,
-  startY: number,
-  endY: number,
-  speed: number = 10,
-): Promise<void> {
-  const startX = 0;
-  const distance = Math.abs(endY - startY);
-  const steps = distance / speed;
-  const delayPerStep = 10; // in milliseconds
-  const yOffset = (endY - startY) / steps;
-
-  await page.hover(selector);
-  await page.mouse.down();
-  await page.mouse.move(0, -200);
-  await page.mouse.up();
-}
+// export async function dragWithSpeed(
+//   page: Page,
+//   selector: string,
+//   startY: number,
+//   endY: number,
+//   speed: number = 10,
+// ): Promise<void> {
+//   const startX = 0;
+//   const distance = Math.abs(endY - startY);
+//   const steps = distance / speed;
+//   const delayPerStep = 10; // in milliseconds
+//   const yOffset = (endY - startY) / steps;
+//
+//   await page.hover(selector);
+//   await page.mouse.down();
+//   await page.mouse.move(0, -200);
+//   await page.mouse.up();
+// }

playground/e2e/initial-snap.spec.ts

@@ -1,24 +1,24 @@
-import { Page, expect, test } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import { ANIMATION_DURATION } from './constants'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/test/initial-snap')
 })
 
-const snapPointYPositions = {
-  0: 800,
-  1: 600,
-  2: 590,
-  3: 200
-} as const
-
-const snapTo = async (page: Page, snapPointIndex: keyof typeof snapPointYPositions) => {
-  await page.hover('[vaul-drawer]')
-  await page.mouse.down()
-  await page.mouse.move(0, snapPointYPositions[snapPointIndex])
-  await page.mouse.up()
-  await page.waitForTimeout(ANIMATION_DURATION)
-}
+// const snapPointYPositions = {
+//   0: 800,
+//   1: 600,
+//   2: 590,
+//   3: 200
+// } as const
+
+// const snapTo = async (page: Page, snapPointIndex: keyof typeof snapPointYPositions) => {
+//   await page.hover('[vaul-drawer]')
+//   await page.mouse.down()
+//   await page.mouse.move(0, snapPointYPositions[snapPointIndex])
+//   await page.mouse.up()
+//   await page.waitForTimeout(ANIMATION_DURATION)
+// }
 
 test.describe('Initial-snap', () => {
   test('should be open and snapped on initial load', async ({ page }) => {

playground/src/components/Drawer.vue → playground/src/components/DemoDrawer.vue

@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  DrawerRoot,
-  DrawerTrigger,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerPortal,
-  DrawerTitle,
-  DrawerRootNested
-} from 'vaul-vue'
+import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerPortal } from 'vaul-vue'
 </script>
 
 <template>

playground/src/views/HomeView.vue

@@ -23,7 +23,7 @@
           </h2>
         </div>
         <div class="flex gap-4 justify-center mt-6">
-          <Drawer />
+          <DemoDrawer />
           <a
             href="https://github.com"
             class="font-semibold text-sm px-4 py-2.5 hover:bg-gray-100 rounded-full"
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import Drawer from '@/components/Drawer.vue'
+import DemoDrawer from '@/components/DemoDrawer.vue'
 import BackgroundTexture from '@/components/BackgroundTexture.vue'
 </script>
 

playground/src/views/tests/NonDismissibleView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  DrawerClose,
   DrawerContent,
   DrawerOverlay,
   DrawerPortal,