Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@takuma-ru/vue-swipe-modal
Advanced tools
@takuma-ru/vue-swipe-modal - npm Package Compare versions
Comparing version 4.0.5 to 4.0.6
| { | ||
| "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 @@ }, |
150
README.md
@@ -5,2 +5,6 @@ # @takuma-ru/vue-swpie-modal | ||
| ## Status | ||
|  | ||
|  | ||
| ## 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
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-25%
3
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-4.58%
59593
- Number of lines in readme file
- decreased by-81.53%
29
No dependency changes