@takuma-ru/vue-swipe-modal - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

package.json

 {
   "name": "@takuma-ru/vue-swipe-modal",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "private": false,
@@ -32,3 +32,3 @@ "description": "Swipeable Bottom Sheet library for vue2 and vue3",
   },
-  "homepage": "https://vue-swipe-modal-vue2.vercel.app",
+  "homepage": "https://vue-swipe-modal-docs.takumaru.dev",
   "main": "./dist/swipe-modal.umd.js",
@@ -72,3 +72,2 @@ "module": "./dist/swipe-modal.es.js",
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1",
     "vue": "^2.0.0 || ^3.0.0"
@@ -75,0 +74,0 @@ },

README.md

@@ -5,2 +5,6 @@ # @takuma-ru/vue-swpie-modal
 
+## Status
+![npm](https://img.shields.io/npm/dt/@takuma-ru/vue-swipe-modal?style=flat-square)
+![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@takuma-ru/vue-swipe-modal?style=flat-square)
+
 ## Description
@@ -13,3 +17,3 @@ Modal window that can be swiped to close.（Swipeable Bottom Sheet）
 ## Getting Started
-#### 1. Install
+### 1. Install
 ```powershell
@@ -19,141 +23,9 @@ yarn add @takuma-ru/vue-swipe-modal@^4.0.0
 
-#### 2. Come on, let's use it.
-<details>
-  <summary>Vue 3.x  /  Vue 2.7</summary>
+# 2. How to use
+- [vue2](https://vue-swipe-modal-docs.takumaru.dev/started/vue2) <br>
+- [vue3](https://vue-swipe-modal-docs.takumaru.dev/started/vue3) <br>
+- [nuxt2](https://vue-swipe-modal-docs.takumaru.dev/started/nuxt2) <br>
+- [nuxt3](https://vue-swipe-modal-docs.takumaru.dev/started/nuxt3) <br>
 
-  ```vue
-  <template>
-    <div>
-      <button @click="modal = true">open</button>
-
-      <swipe-modal
-        v-model="modal"
-        contents-height="50vh"
-        border-top-radius="16px"
-      >
-        <h1>contents</h1>
-      </swipe-modal>
-    </div>
-  </template>
-
-  <script lang="ts" setup>
-  import { ref } from 'vue'
-  import swipeModal from '@takuma-ru/vue-swipe-modal'
-
-  const modal = ref(false)
-  </script>
-  ```
-</details>
-
-<details>
-  <summary>Vue 2.6 or lower (Composition API)</summary>
-
-  ```vue
-  <template>
-    <div>
-      <button @click="modal = true">open</button>
-
-      <swipe-modal
-        v-model="modal"
-        contents-height="50vh"
-        border-top-radius="16px"
-      >
-        <h1>contents</h1>
-      </swipe-modal>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent, ref, reactive } from '@vue/composition-api';
-  import { swipeModal } from '@takuma-ru/vue-swipe-modal'
-
-  export default defineComponent({
-    components: {
-      swipeModal,
-    },
-    setup () {
-      const modal = ref<boolean>(false)
-
-      return {
-        modal,
-      }
-    }
-  })
-  </script>
-  ```
-
-</details>
-
-<details>
-  <summary>Nuxt 2.x</summary>
-
-  ```vue
-  <!-- for Vue2 -->
-  <template>
-    <div>
-      <button @click="modal = true">open</button>
-
-      <swipe-modal
-        v-model="modal"
-        contents-height="50vh"
-        border-top-radius="16px"
-      >
-        <h1>contents</h1>
-      </swipe-modal>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent, ref, reactive } from '@vue/composition-api';
-  import { swipeModal } from '@takuma-ru/vue-swipe-modal'
-
-  export default defineComponent({
-    components: {
-      swipeModal,
-    },
-    setup () {
-      const modal = ref<boolean>(false)
-
-      return {
-        modal,
-      }
-    }
-  })
-  </script>
-  ```
-
-</details>
-
 ## Props
-
-#### General
-| Variable | Type | default | Details |
-| --- | --- | --- | --- |
-| **v-model** | Boolean | `false` | Control the opening and closing |
-| **dark** | Boolean | `false` | Dark mode |
-
-#### Emit
-| Function | Type | Details |
-| --- | --- | --- |
-| **@open** | Void | Function to execute when a modal is opened |
-| **@close** | Void | Function to execute when the modal closes |
-
-#### Background
-| Variable | Type | default | Details |
-| --- | --- | --- | --- |
-| **persistent** | Boolean | `false` | Don't close it by pressing background (out of modal) |
-| **backgroundColor** | String | `#80808080` | Background (out of modal) color |
-
-#### Modal
-| Variable | Type | default | Details |
-| --- | --- | --- | --- |
-| **fullscreen** | Boolean | `false` | Display in full screen mode (height: 100%)|
-| **noTip** | Boolean | `false` | Don't show the chip at the top of the modal. |
-| **contents-width** | String | `100%` | Width of the modal |
-| **contents-height** | String | `30vh` | Height of the modal |
-| **border-top-radius** | String | `null` | Radius at the top of the modal(This value takes precedence) |
-| **border-top-left-radius** | String | `0px` | Modal upper left radius |
-| **border-top-right-radius** | String | `0px` | Modal upper right radius |
-| **contents-color** | String | `white` | Modal background color |
-| **tip-color** | String | `#c8c8c8` | Tip chip color |
-| **dark-contents-color** | String | `black` | Modal background color in dark mode |
+[Prop description page](https://vue-swipe-modal-docs.takumaru.dev/props)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

59593

decreased by-4.58%

Number of lines in readme file

29

decreased by-81.53%

No dependency changes