Merge pull request #1 from bcastlel/feature/first-publication

publish a package

.eslintrc.cjs

@@ -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',
+      },
+    },
+  ],
+};

.gitignore

@@ -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?

README.md

@@ -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>
+```

index.html

@@ -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>