-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from bcastlel/feature/first-publication
publish a package
- Loading branch information
Showing
13 changed files
with
5,377 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
module.exports = { | ||
root: true, | ||
env: { | ||
node: true, | ||
}, | ||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], | ||
parser: '@typescript-eslint/parser', | ||
plugins: ['@typescript-eslint'], | ||
rules: { | ||
/* see https://eslint.org/docs/rules/#possible-problems */ | ||
'array-callback-return': 'error', | ||
'no-await-in-loop': 'error', | ||
'no-duplicate-imports': 'error', | ||
'no-self-compare': 'error', | ||
|
||
/* see https://eslint.org/docs/rules/#suggestions */ | ||
curly: 'error', | ||
'default-case': 'error', | ||
eqeqeq: 'error', | ||
'new-cap': 'error', | ||
'no-alert': 'warn', | ||
'no-console': ['warn', { allow: ['warn', 'error'] }], | ||
'no-else-return': 'error', | ||
'no-implicit-coercion': 'error', | ||
'no-nested-ternary': 'error', | ||
'no-shadow': 'error', | ||
'no-unneeded-ternary': 'error', | ||
'no-var': 'error', | ||
'object-shorthand': 'error', | ||
'one-var-declaration-per-line': 'error', | ||
'prefer-const': 'error', | ||
'prefer-destructuring': 'error', | ||
'quote-props': ['error', 'as-needed'], | ||
|
||
/* see https://eslint.org/docs/rules/#layout-formatting */ | ||
'brace-style': 'error', | ||
'comma-dangle': ['error', 'always-multiline'], | ||
'comma-spacing': 'error', | ||
'eol-last': 'error', | ||
'func-call-spacing': 'error', | ||
indent: ['error', 2, { SwitchCase: 1, MemberExpression: 1 }], | ||
'jsx-quotes': ['error', 'prefer-single'], | ||
'newline-per-chained-call': 'error', | ||
'no-multi-spaces': 'error', | ||
'no-multiple-empty-lines': 'error', | ||
'no-trailing-spaces': 'error', | ||
'object-curly-spacing': ['error', 'always'], | ||
quotes: ['error', 'single'], | ||
semi: 'error', | ||
'space-before-function-paren': ['error', { | ||
anonymous: 'never', | ||
named: 'never', | ||
asyncArrow: 'always', | ||
}], | ||
'space-infix-ops': 'error', | ||
}, | ||
overrides: [ | ||
{ | ||
files: ['*.ts'], | ||
rules: { | ||
/* see https://www.npmjs.com/package/@typescript-eslint/eslint-plugin */ | ||
'@typescript-eslint/explicit-function-return-type': 'error', | ||
'@typescript-eslint/no-explicit-any': 'off', | ||
'@typescript-eslint/no-inferrable-types': 'off', | ||
'@typescript-eslint/no-non-null-assertion': 'off', | ||
}, | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,100 @@ | ||
# v3-scroll-lock | ||
# v3-scroll-lock | ||
|
||
**A scroll lock tool for Vue 3.** Works fine on all devices (and browsers). Uses [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) under the hood. Designed by analogy with [v-scroll-lock](https://github.com/phegman/v-scroll-lock), but intended for Vue 3. I've decided to make it separate from [v-scroll-lock](https://github.com/phegman/v-scroll-lock) because I'm going to improve this tool in the near future. | ||
|
||
## Installation | ||
```bash | ||
npm install v3-scroll-lock | ||
``` | ||
|
||
## Usage | ||
Firstly, you have to use the plugin you've just installed in `main.js (or main.ts).` | ||
|
||
```javascript | ||
import { createApp } from 'vue'; | ||
import App from './App.vue'; | ||
import V3ScrollLock from 'v3-scroll-lock'; | ||
|
||
createApp(App).use(V3ScrollLock, {}) | ||
.mount('#app'); | ||
``` | ||
|
||
You can also pass [body-scroll-lock options](https://github.com/willmcpo/body-scroll-lock#options) on your own. | ||
|
||
```javascript | ||
import { createApp } from 'vue'; | ||
import App from './App.vue'; | ||
import V3ScrollLock from 'v3-scroll-lock'; | ||
|
||
createApp(App).use(V3ScrollLock, { reserveScrollBarGap: true }) | ||
.mount('#app'); | ||
``` | ||
|
||
Then you can use the `v-scroll-lock` directive in any component you want. | ||
|
||
##### Vue 3 Options API | ||
```javascript | ||
<template> | ||
<div v-if="isOpened" class="modal"> | ||
<button @click="close"> | ||
X | ||
</button> | ||
|
||
<div v-scroll-lock="isOpened" class="modal__content"> | ||
<p class="paragraph"> | ||
Sunt dolore magnam, distinctio numquam tenetur doloremque unde animi iure deleniti vero. Architecto omnis, impedit nesciunt est, ipsa nulla et possimus tempore aut neque voluptatem? Rerum laboriosam tempore eum vitae labore repellendus architecto nobis odio. | ||
</p> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: 'ModalComponent', | ||
data() { | ||
return { | ||
isOpened: false, | ||
}; | ||
}, | ||
methods: { | ||
open() { | ||
this.isOpened = true; | ||
}, | ||
close() { | ||
this.isOpened = false; | ||
}, | ||
}, | ||
}; | ||
</script> | ||
``` | ||
##### Vue 3 Composition API + TypeScript | ||
```javascript | ||
<template> | ||
<div v-if="isOpened" class="modal"> | ||
<button @click="close"> | ||
X | ||
</button> | ||
|
||
<div v-scroll-lock="isOpened" class="modal__content"> | ||
<p class="paragraph"> | ||
Sunt dolore magnam, distinctio numquam tenetur doloremque unde animi iure deleniti vero. Architecto omnis, impedit nesciunt est, ipsa nulla et possimus tempore aut neque voluptatem? Rerum laboriosam tempore eum vitae labore repellendus architecto nobis odio. | ||
</p> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue'; | ||
|
||
const isOpened = ref(false); | ||
|
||
const open = (): void => { | ||
isOpened.value = true; | ||
}; | ||
|
||
const close = (): void => { | ||
isOpened.value = false; | ||
}; | ||
</script> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>v3-scroll-lock</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.ts"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.