feat: add editorconfig and eslint configuration;

megaarmos · megaarmos · commit ac9bc3e6b256 · 2025-01-10T17:19:01.000-05:00
fix: typos;
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,6 +1,6 @@
 {
+  "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
   "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 140
+  "printWidth": 100
 }
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@
 
 😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
 
+[Demo](https://megaarmos.douxcode.com/vue-spring-bottom-sheet/) 👀
+
 # Installation
 
 ```
diff --git a/bun.lockb b/bun.lockb
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,32 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/playground/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+  skipFormatting,
+
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          ignoreRestSiblings: true,
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+]
diff --git a/package.json b/package.json
@@ -27,12 +27,12 @@
     "type": "git",
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
   },
-  "homepage": "https://github.com/megaarmos/vue-spring-bottom-sheet",
+  "homepage": "https://megaarmos.douxcode.com/vue-spring-bottom-sheet/",
   "bugs": {
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "exports": {
     ".": {
@@ -49,7 +49,9 @@
   "scripts": {
     "build": "vue-tsc -b && vite build",
     "build:watch": "vite build --watch",
-    "preview": "vite preview",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
     "publish": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
@@ -67,6 +69,11 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "ajv": "^8.17.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
@@ -4,6 +4,6 @@ import '~/assets/css/style.css'
 </script>
 
 <template>
-  <NaviagtionBar />
+  <NavigationBar />
   <NuxtPage />
 </template>
diff --git a/playground/nuxt/components/NavigationBar.vue b/playground/nuxt/components/NavigationBar.vue
diff --git a/playground/nuxt/nuxt.config.ts b/playground/nuxt/nuxt.config.ts
@@ -1,5 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  devtools: { enabled: true }
+  devtools: { enabled: true },
 })
diff --git a/playground/vue/src/App.vue b/playground/vue/src/App.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Naviagtionbar from './components/NaviagtionBar.vue'
+import NavigationBar from './components/NavigationBar.vue'
 </script>
 
 <template>
-  <Naviagtionbar />
+  <NavigationBar />
   <RouterView />
 </template>
diff --git a/playground/vue/src/components/NavigationBar.vue b/playground/vue/src/components/NavigationBar.vue
diff --git a/src/BottomSheet.vue b/src/BottomSheet.vue
@@ -58,12 +58,18 @@ const { height: sheetContentHeight } = useElementBounding(sheetContent)
 const { activate, deactivate } = useFocusTrap([sheet, backdrop], { immediate: false })
 
 // Computed minimum height
-const minHeightComputed = computed(() => Math.ceil(sheetContentHeight.value + sheetHeaderHeight.value + sheetFooterHeight.value))
+const minHeightComputed = computed(() =>
+  Math.ceil(sheetContentHeight.value + sheetHeaderHeight.value + sheetFooterHeight.value),
+)
 
 // Element styling and transforms
 const { motionProperties } = useMotionProperties(sheet)
 const { push, stop, motionValues } = useMotionTransitions()
-const { set, stop: stopMotion } = useMotionControls(motionProperties, {}, { push, motionValues, stop })
+const { set, stop: stopMotion } = useMotionControls(
+  motionProperties,
+  {},
+  { push, motionValues, stop },
+)
 
 // Height and translation management
 const height = ref<number>(0)
@@ -72,7 +78,12 @@ const translateY = ref(0)
 // Snap points management
 const { snapPoints: propSnapPoints } = toRefs(props)
 const snapPointsRef = computed(() => propSnapPoints.value ?? [minHeightComputed.value])
-const { minSnap, maxSnap, snapPoints, closestSnapPointIndex } = useSnapPoints(snapPointsRef, height)
+const {
+  minSnap,
+  maxSnap,
+  snapPoints: sortedSnapPoint,
+  closestSnapPointIndex,
+} = useSnapPoints(snapPointsRef, height)
 
 const isWindowScrollLocked = useScrollLock(document.body)
 
@@ -150,7 +161,10 @@ const snapToPoint = (snapPoint: number) => {
   })
 }
 
-const handleDrag: Handler<'drag', PointerEvent> | undefined = ({ delta: [_deltaX, _deltaY], direction: [_directionX, _directionY] }) => {
+const handleDrag: Handler<'drag', PointerEvent> | undefined = ({
+  delta: [_deltaX, _deltaY],
+  direction: [_directionX, _directionY],
+}) => {
   if (!sheet.value) return
 
   if (translateY.value <= 0) {
@@ -170,7 +184,10 @@ const handleDrag: Handler<'drag', PointerEvent> | undefined = ({ delta: [_deltaX
   }
 
   set({
-    height: clamp(rubberbandIfOutOfBounds(height.value, 0, maxSnap.value, 0.25), { min: 0, max: windowHeight.value }),
+    height: clamp(rubberbandIfOutOfBounds(height.value, 0, maxSnap.value, 0.25), {
+      min: 0,
+      max: windowHeight.value,
+    }),
   })
 
   if (_directionY > 0) {
@@ -184,17 +201,29 @@ const handleDragEnd: Handler<'drag', PointerEvent> | undefined = () => {
   if (!sheet.value) return
 
   translateY.value = props.canSwipeClose
-    ? [0, height.value].reduce((prev, curr) => (Math.abs(curr - translateY.value) < Math.abs(prev - translateY.value) ? curr : prev))
+    ? [0, height.value].reduce((prev, curr) =>
+        Math.abs(curr - translateY.value) < Math.abs(prev - translateY.value) ? curr : prev,
+      )
     : 0
-  push('y', translateY.value, motionProperties, { type: 'tween', easings: 'easeInOut', bounce: 0, duration: 300 })
+  push('y', translateY.value, motionProperties, {
+    type: 'tween',
+    easings: 'easeInOut',
+    bounce: 0,
+    duration: 300,
+  })
 
   if (translateY.value === height.value) {
     translateY.value = 0
     close()
   }
 
-  height.value = Math.min(snapPoints.value[closestSnapPointIndex.value], windowHeight.value)
-  push('height', height.value, motionProperties, { type: 'tween', easings: 'easeInOut', bounce: 0, duration: 300 })
+  height.value = Math.min(sortedSnapPoint.value[closestSnapPointIndex.value], windowHeight.value)
+  push('height', height.value, motionProperties, {
+    type: 'tween',
+    easings: 'easeInOut',
+    bounce: 0,
+    duration: 300,
+  })
 }
 
 useGesture(
@@ -238,7 +267,7 @@ useGesture(
 
       const isAtTop = sheetScroll.value!.scrollTop === 0
       const isDraggingDown = _directionY > 0
-      const hasSingleSnapPoint = snapPoints.value.length === 1
+      const hasSingleSnapPoint = sortedSnapPoint.value.length === 1
 
       if (hasSingleSnapPoint) {
         if (translateY.value === 0 && isAtTop) {
@@ -276,7 +305,9 @@ useGesture(
         translateY.value = clamp(translateY.value, { min: 0, max: minSnap.value })
 
         set({
-          y: props.canSwipeClose ? translateY.value : rubberbandIfOutOfBounds(translateY.value, -sheetHeight.value, 0, 0.5),
+          y: props.canSwipeClose
+            ? translateY.value
+            : rubberbandIfOutOfBounds(translateY.value, -sheetHeight.value, 0, 0.5),
         })
       }
 
@@ -287,7 +318,7 @@ useGesture(
       height.value = Math.min(height.value, windowHeight.value)
 
       const isAtTop = sheetScroll.value!.scrollTop === 0
-      if (snapPoints.value.length === 1) {
+      if (sortedSnapPoint.value.length === 1) {
         if (_deltaY < 0 && translateY.value === 0 && isAtTop) {
           preventScroll.value = false
         }
@@ -320,8 +351,8 @@ const debouncedMaxHeightUpdate = funnel(
     emit('maxHeight', windowHeight.value)
 
     nextTick(() => {
-      height.value = snapPoints.value[closestSnapPointIndex.value]
-      snapToPoint(snapPoints.value[closestSnapPointIndex.value])
+      height.value = sortedSnapPoint.value[closestSnapPointIndex.value]
+      snapToPoint(sortedSnapPoint.value[closestSnapPointIndex.value])
     })
   },
   { minQuietPeriodMs: 50 },
@@ -335,9 +366,9 @@ watch(windowHeight, () => {
 watch(minHeightComputed, () => {
   emit('minHeight', minHeightComputed.value)
 
-  if (snapPoints.value.length === 1) {
+  if (sortedSnapPoint.value.length === 1) {
     nextTick(() => {
-      if (snapPoints.value[0] === minHeightComputed.value) {
+      if (sortedSnapPoint.value[0] === minHeightComputed.value) {
         snapToPoint(Math.min(minHeightComputed.value, windowHeight.value))
       }
     })
@@ -369,9 +400,21 @@ defineExpose({ open, close, snapToPoint })
   <Teleport to="body">
     <div data-vsbs-container>
       <Transition name="fade">
-        <div v-show="showSheet && blocking" ref="backdrop" data-vsbs-backdrop @click="backdropClick()" />
+        <div
+          v-show="showSheet && blocking"
+          ref="backdrop"
+          data-vsbs-backdrop
+          @click="backdropClick()"
+        />
       </Transition>
-      <div ref="sheet" :data-vsbs-shadow="!blocking" :data-vsbs-sheet-show="showSheet" aria-modal="true" data-vsbs-sheet tabindex="-1">
+      <div
+        ref="sheet"
+        :data-vsbs-shadow="!blocking"
+        :data-vsbs-sheet-show="showSheet"
+        aria-modal="true"
+        data-vsbs-sheet
+        tabindex="-1"
+      >
         <div ref="sheetHeader" data-vsbs-header>
           <slot name="header" />
         </div>
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,3 @@
 import BottomSheet from './BottomSheet.vue'
 
-export default BottomSheet
+export default BottomSheet

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
	`2`	`+ "$schema": "https://json.schemastore.org/prettierrc",`
`2`	`3`	`"semi": false,`
`3`	`4`	`"singleQuote": true,`
`4`		`- "tabWidth": 2,`
`5`		`- "printWidth": 140`
	`5`	`+ "printWidth": 100`
`6`	`6`	`}`