Merge pull request #14 from Elliot-Alexander/run-sherif

Update CI

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["playground"]
 }

.changeset/silver-beds-tease.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+Initial MVP of Vaul implementation in Vue

.eslintrc.cjs

@@ -3,7 +3,7 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',

.github/workflows/cd.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install Dependencies
@@ -32,4 +32,4 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/ci.yaml

@@ -4,6 +4,25 @@ on:
     branches-ignore:
       - main
 jobs:
+  sherif:
+    name: Monorepo Sherif
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Run sherif
+        run: pnpm dlx sherif@latest
+
   lint:
     name: Lint and Format
     runs-on: ubuntu-latest
@@ -17,7 +36,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -30,6 +49,7 @@ jobs:
         run: pnpm run prettier:check
 
   tests:
+    name: Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -41,12 +61,15 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build package
+        run: pnpm run build-package
+
       - name: Install Playwright browsers
         run: pnpm dlx playwright install --with-deps
 

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -0,0 +1,3 @@
+/pnpm-lock.yaml
+/.gitignore
+/.changeset/**.md

.prettierrc.json

@@ -5,4 +5,4 @@
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
+}

README.md

@@ -1,6 +1,6 @@
 # Vaul Vue
 
-Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices. 
+Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices.
 It uses [Radix Vue's Dialog primitive](https://www.radix-vue.com/components/dialog.html) under the hood and is a feature complete port of [Emil Kowalski's Vaul library](https://github.com/emilkowalski/vaul) (built for React).
 
 ## Installation
@@ -18,33 +18,27 @@ yarn add (not published yet sorry)
 ```
 
 ## Usage
+
 ```vue
 <script setup lang="ts">
-   import {
-      DrawerRoot,
-      DrawerTrigger,
-      DrawerOverlay,
-      DrawerContent,
-      DrawerPortal,
-   } from 'vaul-vue'
+import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerPortal } from 'vaul-vue'
 </script>
 
 <template>
-   <DrawerRoot>
-      <DrawerTrigger>
-         Open
-      </DrawerTrigger>
-      <DrawerPortal>
-         <DrawerOverlay />
-         <DrawerContent>
-            <p>Content</p>
-         </DrawerContent>
-      </DrawerPortal>
-   </DrawerRoot>
+  <DrawerRoot>
+    <DrawerTrigger> Open </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerContent>
+        <p>Content</p>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
 </template>
 ```
 
 ## Credits
+
 All credits go to these open-source works and resources
 
 - Major credits go to [Emil Kowalski](https://emilkowal.ski/) for the original [Vaul library](https://github.com/emilkowalski/vaul).

package.json

@@ -3,13 +3,15 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prettier:check": "prettier --check . --ignore-path .gitignore",
-    "prettier:fix": "prettier --write . --ignore-path .gitignore",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
     "eslint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "eslint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "test": "pnpm -r test",
-    "release": "pnpm -r release"
+    "release": "pnpm -r release",
+    "build-package": "pnpm --filter vaul-vue build-only"
   },
+  "packageManager": "[email protected]",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@rushstack/eslint-patch": "^1.3.3",

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/DrawerOverlay.vue

@@ -4,9 +4,7 @@ import { computed } from 'vue'
 import { injectDrawerRootContext } from './context'
 const { overlayRef, snapPoints, isVisible, isOpen, shouldFade } = injectDrawerRootContext()
 
-const hasSnapPoints = computed(
-  () => snapPoints && (snapPoints.value?.length ?? 0) > 0
-)
+const hasSnapPoints = computed(() => snapPoints && (snapPoints.value?.length ?? 0) > 0)
 </script>
 
 <template>

packages/vaul-vue/src/constants.ts

@@ -1,6 +1,6 @@
 export const TRANSITIONS = {
   DURATION: 0.5,
-  EASE: [0.32, 0.72, 0, 1],
-};
+  EASE: [0.32, 0.72, 0, 1]
+}
 
-export const VELOCITY_THRESHOLD = 0.4;
+export const VELOCITY_THRESHOLD = 0.4

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/platformTests.ts

@@ -1,27 +1,29 @@
 function testPlatform(re: RegExp): boolean | undefined {
-  return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : undefined
 }
 
 function isMac(): boolean | undefined {
-  return testPlatform(/^Mac/);
+  return testPlatform(/^Mac/)
 }
 
 function isIPhone(): boolean | undefined {
-  return testPlatform(/^iPhone/);
+  return testPlatform(/^iPhone/)
 }
 
 export function isSafari(): boolean | undefined {
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 }
 
 function isIPad(): boolean | undefined {
   return (
     testPlatform(/^iPad/) ||
     // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
     (isMac() && navigator.maxTouchPoints > 1)
-  );
+  )
 }
 
 export function isIOS(): boolean | undefined {
-  return isIPhone() || isIPad();
+  return isIPhone() || isIPad()
 }

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

packages/vaul-vue/src/types.ts

@@ -1,4 +1,4 @@
 export interface SnapPoint {
-  fraction: number;
-  height: number;
+  fraction: number
+  height: number
 }