🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@kouts/vue-modal

Package Overview
Dependencies
Maintainers
2
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kouts/vue-modal - npm Package Compare versions

Comparing version

4.0.0
to
4.0.1

docs/.vuepress/components/Example2.vue

7

CHANGELOG.md

@@ -0,1 +1,8 @@

## [4.0.1](https://github.com/kouts/vue-modal/compare/v4.0.0...v4.0.1) (2023-06-04)
### Bug Fixes
* updated docs for v4 ([d0f2047](https://github.com/kouts/vue-modal/commit/d0f2047687acb79c161eeb4c41b4f1b85aca98a9))
# [4.0.0](https://github.com/kouts/vue-modal/compare/v3.0.9...v4.0.0) (2023-06-04)

@@ -2,0 +9,0 @@

5

docs/.vuepress/client.js
import Example1 from './components/Example1.vue'
import Example2 from './components/Example2.vue'
import Intro from './components/Intro.vue'
import Modal from '@/Modal.vue'
import { Modal, modalPlugin } from '@/index'
import { defineClientConfig } from '@vuepress/client'

@@ -9,4 +10,6 @@ import './styles/styles.scss'

enhance({ app, router, siteData }) {
app.use(modalPlugin)
app.component('Modal', Modal)
app.component('Example1', Example1)
app.component('Example2', Example2)
app.component('Intro', Intro)

@@ -13,0 +16,0 @@ },

15

docs/index.md

@@ -15,7 +15,8 @@ # vue-modal

## Features at a glance
<p class="mb-n3">&nbsp;</p>
## Features at a glance
<p class="mb-n3">&nbsp;</p>
- Lightweight, minified gzipped version is < **4kb**
- Opens and closes with a data variable using ```v-model```
- Opens and closes with a data variable using `v-model` **or** with a `name` prop and `show`/`hide` functions
- Includes sensible default styling but it's also highly customizable via user CSS classes and styles

@@ -26,3 +27,3 @@ - Override modal title and content via slots

- Scrollable when it's contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the ```esc``` key
- Closeable by clicking on the upper right "x", the overlay or the `esc` key
- **Stackable** - Multiple modal windows on top of each other

@@ -33,3 +34,3 @@ - Ability to set initial focus on an element when the modal window opens, just set the **autofocus** attribute on an element inside the modal

- Render on demand or stay always in DOM with "live" mode
- Modals appended to ```<body>``` by default, ability to append to a custom element
- Modals appended to `<body>` by default, ability to append to a custom element

@@ -39,3 +40,3 @@ ## Browsers support

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
| --------- | --------- | --------- | --------- | --------- |
| Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

26

docs/installation/index.md
## Basic
Download the repo, extract ```vue-modal.umd.js``` and ```vue-modal.css``` out of the ```dist``` folder
Download the repo, extract `vue-modal.umd.js` and `vue-modal.css` out of the `dist` folder
and insert them in your page.
``` html
```html
<script type="text/javascript" src="vue-modal.umd.js"></script>
```
``` html
<link rel="stylesheet" href="vue-modal.css">
```html
<link rel="stylesheet" href="vue-modal.css" />
```

@@ -17,9 +17,19 @@

Install it via npm
```
npm i @kouts/vue-modal@next --save
```
Use the ```import``` statement to include it into your js
``` js
import VueModal from '@kouts/vue-modal'
Use the `import` statement to include it into your `main.js` file.
You may also choose to register `vue-modal` globally, so that you don't need to import it in every component.
```js
import { createApp } from 'vue'
import { Modal } from '@kouts/vue-modal'
import '@kouts/vue-modal/dist/vue-modal.css'
```
const app = Vue.createApp({...})
// This is optional
app.component('Modal', Modal)
```

23

docs/options/index.md
## v-model
Pass a Boolean value to the `v-model` directive to open and close the modal window.
Pass a `Boolean` value to the `v-model` directive to show and hide the modal window.
## Plugin API
The Plugin API can be called within any component through:
- `useModal` in Composition API
- `this.$modal` in Options API
and exposes 3 functions:
- **`show(name)`** - Shows the modal with the given name
- **`hide(name)`** - Hides the modal with the given name
- **`hideAll()`** - Hides all modals
## Props

@@ -18,2 +31,8 @@

<tr>
<td>name</td>
<td>The name of the modal to use with the show / hide functions.</td>
<td>String</td>
<td><em>Empty</em></td>
</tr>
<tr>
<td>title</td>

@@ -97,3 +116,3 @@ <td>The title of the modal element</td>

<tr>
<td>basedOn</td>
<td>modelValue</td>
<td>Opens and closes the modal window, this is used by <code>v-model</code> internally.</td>

@@ -100,0 +119,0 @@ <td>Boolean</td>

124

docs/usage/index.md

@@ -1,53 +0,105 @@

## Register
Register ```vue-modal``` in your application globbaly
``` js
const app = Vue.createApp({...})
# Usage
app.component('Modal', VueModal)
```
or locally
``` js
There are two ways in which you can control `vue-modal`'s visibility:
1. With `v-model` directive
2. Using a `name` prop and `show`/`hide` functions
## Usage with `v-model` directive
To control the visibility of the modal with `v-model`, you need to pass a `Boolean` value to the `v-model` directive.
```vue
<template>
<!-- Setting `showModal` to true, displays the modal -->
<button type="button" @click="showModal = true">Open a modal</button>
<Modal v-model="showModal" title="My first modal">
<p>Modal content goes here...</p>
</Modal>
</template>
<script>
// You can skip the import if you've registered the component globally
import { Modal } from '@kouts/vue-modal'
export default {
components: {
'Modal': VueModal
Modal
},
data() {
return {
showModal: false
}
}
}
</script>
```
## Use
### Template
with `v-model`
``` vue
<button type="button" class="btn btn-primary" @click="showModal=true">
Open a modal
</button>
<Modal v-model="showModal" title="My first modal">
<p>Modal content goes here...</p>
</Modal>
**Example:**
<Example1 />
## Usage with `name` prop and `show`/`hide` functions
`vue-modal` comes with a `modalPlugin` that you need to import and register,
in order to be able to use `vue-modal` with a `name` prop.
```js
import { createApp } from 'vue'
import { modalPlugin } from '@kouts/vue-modal'
const app = Vue.createApp({...})
app.use(modalPlugin)
```
or
with `modelValue` value and `update:modelValue` event
``` vue
<Modal :model-value="showModal" title="My first modal" @update:modelValue="showModal = false">
<p>Modal content goes here...</p>
</Modal>
To control the visibility of the modal with the mane `prop` you use the and `show`/`hide` functions.
**Composition API**
```vue
<template>
<!-- Use the `show` function to display the modal -->
<button type="button" @click="show('myModal')">Open a modal</button>
<Modal name="myModal" title="My first modal">
<p>Modal content goes here...</p>
</Modal>
</template>
<script setup>
// You can skip the import if you've registered the component globally
import { Modal, useModal } from '@kouts/vue-modal'
const { show } = useModal()
</script>
```
**Options API**
### Script
``` js
import VueModal from '@kouts/vue-modal'
```vue
<template>
<!-- Use the `$modal.show` function to display the modal -->
<button type="button" @click="$modal.show('myModal')">Open a modal</button>
<Modal name="myModal" title="My first modal">
<p>Modal content goes here...</p>
</Modal>
</template>
<script>
// You can skip the import if you've registered the component globally
import { Modal } from '@kouts/vue-modal'
export default {
components: {
'Modal': VueModal
},
data() {
return {
showModal: false
}
Modal
}
}
</script>
```
### Result
<Example1 />
**Example:**
<Example2 />

3

package.json
{
"name": "@kouts/vue-modal",
"description": "A modal window component for Vue 3",
"version": "4.0.0",
"version": "4.0.1",
"author": "Giannis Koutsaftakis",

@@ -17,3 +17,2 @@ "license": "MIT",

"unpkg": "dist/vue-modal.umd.js",
"sideEffects": false,
"scripts": {

@@ -20,0 +19,0 @@ "dev": "vite",

13

README.md
# vue-modal <a href="https://npm.im/@kouts/vue-modal"><img src="https://badgen.net/npm/v/@kouts/vue-modal/next"></a> ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-modal/next/dist/vue-modal.umd.js.svg?compression=gzip) ![](coverage/badge.svg)
A customizable, stackable, and lightweight modal component for Vue.js 3.

@@ -15,7 +16,6 @@

## Features at a glance
- Lightweight, minified gzipped version is < **4kb**
- Opens and closes with a data variable using ```v-model```
- Opens and closes with a data variable using `v-model` **or** with a `name` prop and `show`/`hide` functions
- Includes sensible default styling but it's also highly customizable via user CSS classes and styles

@@ -26,3 +26,3 @@ - Override modal title and content via slots

- Scrollable when it's contents exceed screen height
- Closeable by clicking on the upper right "x", the overlay or the ```esc``` key
- Closeable by clicking on the upper right "x", the overlay or the `esc` key
- **Stackable** - Multiple modal windows on top of each other

@@ -33,3 +33,3 @@ - Ability to set initial focus on an element when the modal window opens, just set the **autofocus** attribute on an element inside the modal

- Render on demand or stay always in DOM with "live" mode
- Modals appended to ```<body>``` by default, ability to append to a custom element
- Modals appended to `<body>` by default, ability to append to a custom element

@@ -39,6 +39,5 @@ ## Browsers support

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
| --------- | --------- | --------- | --------- | --------- |
| Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Click here for documentation and examples

@@ -45,0 +44,0 @@ https://next--vue-modal-demo.netlify.app/

docs/.vuepress/styles/styles.scss

Sorry, the diff of this file is not supported yet