feat: update for Vue 3

.eslintrc.cjs

@@ -0,0 +1,31 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  rules: {
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        types: {
+          Function: false,
+        },
+        extendDefaults: true,
+      },
+    ],
+    "vue/no-v-html": 0,
+    "vue/no-v-text-v-html-on-component": 0,
+  },
+};

.gitignore

@@ -1,3 +1,14 @@
-dist
 node_modules
-.idea
+demo/node_modules
+demo/.vscode
+.DS_Store
+dist
+dist-ssr
+*.local
+docs/.vuepress/.cache
+docs/.vuepress/.temp
+docs/.vitepress/dist
+types
+yarn-error.log
+.npmrc
+.env

README.MD

@@ -5,20 +5,24 @@
 ![Downloads](https://img.shields.io/npm/dt/@webzlodimir/vue-bottom-sheet)
 ![Version](https://img.shields.io/npm/v/@webzlodimir/vue-bottom-sheet)
 
-A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [Hammer.js](https://hammerjs.github.io/)
+A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [Hammer.js](https://hammerjs.github.io/) for Vue 2 & Vue 3
 
  - :clapper: [Demo](https://vaban-ru.github.io/vue-bottom-sheet-demo/)
- - :open_book: [Документация на русском](https://github.com/vaban-ru/vue-bottom-sheet/blob/master/README_RU.MD)
+ - :open_book: [Docs for Vue 2 version](https://github.com/vaban-ru/vue-bottom-sheet/blob/master/README_VUE2.MD)
 
 ## Installation
 
 ### NPM
 
-`npm install --save @webzlodimir/vue-bottom-sheet`
+```
+npm install @webzlodimir/vue-bottom-sheet
+```
 
 ### Yarn
 
-`yarn add @webzlodimir/vue-bottom-sheet`
+```
+yarn add @webzlodimir/vue-bottom-sheet
+```
 
 ## Usage
 
@@ -33,55 +37,44 @@ A nice clean and touch-friendly bottom sheet component based on [Vue.js](https:/
   </vue-bottom-sheet>
 </template>
 
-<script>
-import  VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
-
-export default {
-  components: {
-    VueBottomSheet
-  },
-  methods: {
-    open() {
-      this.$refs.myBottomSheet.open();
-    },
-    close() {
-      this.$refs.myBottomSheet.close();
-    }
-  }
-}
-</script>
-```
+<script setup>
+import { VueBottomSheet } from "@webzlodimir/vue-bottom-sheet";
+import  "@webzlodimir/vue-bottom-sheet/dist/style.css";
+import { ref } from "vue";
 
-Or add to main.js for use throughout the project
-```js
-import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
-import Vue from "vue";
+const myBottomSheet = ref(null)
 
-Vue.use(VueBottomSheet);
-```
+const open = () => {
+  myBottomSheet.value.open();
+}
 
+const close = () => {
+  myBottomSheet.value.close();
+}
+</script>
+```
 ## Props
 
-| Prop  | Type | Description | Example |
-| ------------- | ------------- | ------------- | ------------- |
-| overlay  | Boolean  | Remove back overlay  | `:overlay="false"` |
-| click-to-close  | Boolean  | Click outside card to close  | `:click-to-close="false"` |
-| max-width  | String  | Set max-width of component card  | `max-width="640px"` |
-| max-height  | String  | Set max-height of component card  | `max-height="90%"` |
-| effect  | String  | Set effect for component card  | `effect="fx-fadein-scale"` |
-| rounded  | Boolean  | Round the top two corners of the sheet  | `:rounded="false"` |
-| is-full-screen  | Boolean  | Enable or disable full-screen mode  | `:is-full-screen="true"` |
-| swipe-able  | Boolean  | Enable or disable swipe to close | `:swipe-able="false"` |
-| overlay-color  | String  | Set overlay color with opacity | `:overlay-color="#0000004D"` |
-| background-scrollable  | Boolean  | Enable scroll | `:background-scrollable="true"` |
-| background-clickable  | Boolean  | Enable background click, doesn't work if `click-to-close=true` | `:background-clickable="true"` |
+| Prop                  | Type       | Description                                                    | Example                         |
+|-----------------------|------------|----------------------------------------------------------------|---------------------------------|
+| overlay               | Boolean    | Remove back overlay                                            |  `:overlay="false"`             |
+| click-to-close        | Boolean    | Click outside card to close                                    | `:click-to-close="false"`       |
+| max-width             | String     | Set max-width of component card                                | `max-width="640px"`             |
+| max-height            | String     | Set max-height of component card                               | `max-height="90%"`              |
+| effect                | String     | Set effect for component card                                  | `effect="fx-fadein-scale"`      |
+| rounded               | Boolean    | Round the top two corners of the sheet                         | `:rounded="false"`              |
+| is-full-screen        | Boolean    | Enable or disable full-screen mode                             | `:is-full-screen="true"`        |
+| swipe-able            | Boolean    | Enable or disable swipe to close                               | `:swipe-able="false"`           |
+| overlay-color         | String     | Set overlay color with opacity                                 | `:overlay-color="#0000004D"`    |
+| background-scrollable | Boolean    | Enable scroll                                                  | `:background-scrollable="true"` |
+| background-clickable  | Boolean    | Enable background click, doesn't work if `click-to-close=true` | `:background-clickable="true"`  |
 
 ## Events
 
-| Event  | Description | Example |
-| ------------- | ------------- | ------------- |
-| opened  | Fire when card component is opened  | @opened="" |
-| closed  | Fire when card component is closed  | @closed="" |
+| Event    | Description                          | Example      |
+|----------|--------------------------------------|--------------|
+| opened   | Fire when card component is opened   | @opened=""   |
+| closed   | Fire when card component is closed   | @closed=""   |
 
 ### List of effects