@vuesimple/vs-modal 3.1.6 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -62
- package/build/vite.config.js +2 -2
- package/dist/index.esm.js +1 -1
- package/dist/index.min.js +2 -3
- package/dist/index.umd.js +2 -3
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -101,68 +101,6 @@ app.use(VsModal.plugin);
|
|
|
101
101
|
|
|
102
102
|
<br />
|
|
103
103
|
|
|
104
|
-
<h3>
|
|
105
|
-
<img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
|
|
106
|
-
</h3>
|
|
107
|
-
|
|
108
|
-
Nuxt Demo - Code Sandbox: [Link](https://codesandbox.io/s/vs-modal-nuxt-w35gj)
|
|
109
|
-
|
|
110
|
-
After installation,
|
|
111
|
-
|
|
112
|
-
- Create a file `/plugins/vs-modal.js`
|
|
113
|
-
|
|
114
|
-
```javascript
|
|
115
|
-
import Vue from 'vue';
|
|
116
|
-
import VsModal from '@vuesimple/vs-modal';
|
|
117
|
-
|
|
118
|
-
Vue.component('vs-modal', VsModal);
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
- Update `nuxt.config.js`
|
|
122
|
-
```javascript
|
|
123
|
-
module.exports = {
|
|
124
|
-
...
|
|
125
|
-
plugins: [
|
|
126
|
-
{ src: '~plugins/vs-modal', mode: 'client' }
|
|
127
|
-
...
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
```
|
|
131
|
-
- In the page/ component
|
|
132
|
-
|
|
133
|
-
```html
|
|
134
|
-
<template>
|
|
135
|
-
<button size="sm" @click="openModal('modal1')">Basic Modal</button>
|
|
136
|
-
|
|
137
|
-
<client-only>
|
|
138
|
-
<vs-modal ref="modal1" title="Funny, Modal Works 🥳"> Hello Peeps from V-Simple-Modal!! </vs-modal>
|
|
139
|
-
</client-only>
|
|
140
|
-
</template>
|
|
141
|
-
|
|
142
|
-
<script>
|
|
143
|
-
export default {
|
|
144
|
-
methods: {
|
|
145
|
-
openModal(ref) {
|
|
146
|
-
this.$refs[ref].open();
|
|
147
|
-
},
|
|
148
|
-
|
|
149
|
-
closeModal(ref) {
|
|
150
|
-
this.$refs[ref].close();
|
|
151
|
-
},
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
</script>
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
**Note**
|
|
158
|
-
|
|
159
|
-
- For older Nuxt versions, use `<no-ssr>...</no-ssr>` tag.
|
|
160
|
-
- You can also do
|
|
161
|
-
`import VsModal from '@vuesimple/vs-modal'`
|
|
162
|
-
& add in `component:{VsModal}` and use it within component, without globally installing in plugin folder.
|
|
163
|
-
|
|
164
|
-
<br />
|
|
165
|
-
|
|
166
104
|
### ⚙ Props
|
|
167
105
|
|
|
168
106
|
| Name | Type | Default | Description |
|
package/build/vite.config.js
CHANGED
|
@@ -2,10 +2,10 @@ import vue from '@vitejs/plugin-vue';
|
|
|
2
2
|
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
plugins: [vue(), cssInjectedByJsPlugin()],
|
|
5
|
+
plugins: [vue(), cssInjectedByJsPlugin({ styleId: 'vs-modal-styles' })],
|
|
6
6
|
build: {
|
|
7
7
|
// separate css file or not
|
|
8
|
-
cssCodeSplit:
|
|
8
|
+
cssCodeSplit: false,
|
|
9
9
|
lib: {
|
|
10
10
|
entry: './src/index.js',
|
|
11
11
|
formats: ['es', 'umd', 'iife'],
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-modal-styles",o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
2
|
import { openBlock as i, createBlock as b, resolveDynamicComponent as E, withCtx as p, createElementBlock as l, createCommentVNode as c, createElementVNode as a, renderSlot as f, resolveComponent as w, Transition as M, withDirectives as S, normalizeClass as v, withModifiers as A, normalizeStyle as T, createVNode as x, withKeys as R, toDisplayString as V, vShow as I } from "vue";
|
|
3
3
|
const C = (e, t) => {
|
|
4
4
|
const s = e.__vccOpts || e;
|
package/dist/index.min.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
-
var VsModal=function(
|
|
3
|
-
`,document.head.appendChild(f);const Y="",p=(t,o)=>{const s=t.__vccOpts||t;for(const[i,a]of o)s[i]=a;return s},k={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,o){if(!this.containFocus){this.$emit("focus-overflow",t,o);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,o);return}o.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},w={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},x={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function C(t,o,s,i,a,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:o[0]||(o[0]=r=>n.redirectFocus(r,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",w,[e.renderSlot(t.$slots,"default")],512),!s.disabled&&s.containFocus?(e.openBlock(),e.createElementBlock("span",x,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:o[1]||(o[1]=r=>n.redirectFocus(r,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const B=p(k,[["render",C]]),_=/^\s+|\s+$/g,h=/\s+/g;function O(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function v(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:O(t)}function m(t){return v(t)?(t.getAttribute("class")||"").replace(_,"").split(h):[]}function c(t){return typeof t=="string"?t.replace(_,"").split(h):t}function u(t,o){v(t)&&t.setAttribute("class",c(o).join(" "))}function g(t,o){const s=m(t);return c(o).forEach(a=>{const n=s.indexOf(a);n!==-1&&s.splice(n,1)}),u(t,s),s}function E(t,o){const s=g(t,o),i=c(o);return s.push(...i),u(t,s),s}function b(t,o){const s=m(t);return c(o).every(a=>s.indexOf(a)!==-1)}const A={add:E,remove:g,contains:b,has:b,set:u,get:m},F="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",H="",M={name:"VsModal",components:{VsFocusContainer:B},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return!!this.$slots.footer},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){this.dismissible&&(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),A.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&A.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const o=Math.max(0,t);return o===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",o),o},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},S=["role"],V={key:0,class:"vs-modal__header"},T={class:"vs-modal__header-text"},z={class:"vs-modal__close-button"},N=[e.createElementVNode("img",{src:F,alt:"close"},null,-1)],R={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function j(t,o,s,i,a,n){const r=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:s.role,onClick:o[2]||(o[2]=e.withModifiers((...l)=>n.onBackdropClick&&n.onBackdropClick(...l),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":s.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:o[1]||(o[1]=e.withModifiers((...l)=>n.onBackdropClick&&n.onBackdropClick(...l),["self"]))},[e.createVNode(r,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[s.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",T,e.toDisplayString(s.title),1)])])),e.createElementVNode("div",z,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!s.removeCloseButton&&s.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:o[0]||(o[0]=(...l)=>n.close&&n.close(...l))},N)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,S),[[e.vShow,a.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const y=p(M,[["render",j]]),K={install(t){t.component("VsModal",y)}};return d.default=y,d.plugin=K,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),d}({},Vue);
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-modal-styles",o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
var VsModal=function(c,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[i,r]of s)o[i]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,i,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=l=>n.redirectFocus(l,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=l=>n.redirectFocus(l,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,h=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function p(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return p(t)?(t.getAttribute("class")||"").replace(A,"").split(h):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(h):t}function f(t,s){p(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),i=d(s);return o.push(...i),f(t,o),o}function g(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const y={add:M,remove:_,contains:g,has:g,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",H="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return!!this.$slots.footer},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){this.dismissible&&(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),y.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&y.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},R=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],x={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,i,r,n){const l=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...a)=>n.onBackdropClick&&n.onBackdropClick(...a),["self"]))},[e.createVNode(l,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...a)=>n.close&&n.close(...a))},R)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",x,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};return c.default=C,c.plugin=j,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),c}({},Vue);
|
package/dist/index.umd.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
-
(function(
|
|
3
|
-
`,document.head.appendChild(f);const Y="",p=(t,o)=>{const s=t.__vccOpts||t;for(const[r,i]of o)s[r]=i;return s},x={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,o){if(!this.containFocus){this.$emit("focus-overflow",t,o);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,o);return}o.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},k={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},w={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function C(t,o,s,r,i,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:o[0]||(o[0]=l=>n.redirectFocus(l,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"default")],512),!s.disabled&&s.containFocus?(e.openBlock(),e.createElementBlock("span",w,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:o[1]||(o[1]=l=>n.redirectFocus(l,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const B=p(x,[["render",C]]),_=/^\s+|\s+$/g,h=/\s+/g;function O(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function v(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:O(t)}function m(t){return v(t)?(t.getAttribute("class")||"").replace(_,"").split(h):[]}function c(t){return typeof t=="string"?t.replace(_,"").split(h):t}function u(t,o){v(t)&&t.setAttribute("class",c(o).join(" "))}function b(t,o){const s=m(t);return c(o).forEach(i=>{const n=s.indexOf(i);n!==-1&&s.splice(n,1)}),u(t,s),s}function E(t,o){const s=b(t,o),r=c(o);return s.push(...r),u(t,s),s}function g(t,o){const s=m(t);return c(o).every(i=>s.indexOf(i)!==-1)}const A={add:E,remove:b,contains:g,has:g,set:u,get:m},F="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",q="",M={name:"VsModal",components:{VsFocusContainer:B},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return!!this.$slots.footer},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){this.dismissible&&(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),A.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&A.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const o=Math.max(0,t);return o===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",o),o},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},S=["role"],V={key:0,class:"vs-modal__header"},T={class:"vs-modal__header-text"},z={class:"vs-modal__close-button"},N=[e.createElementVNode("img",{src:F,alt:"close"},null,-1)],R={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function j(t,o,s,r,i,n){const l=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:s.role,onClick:o[2]||(o[2]=e.withModifiers((...d)=>n.onBackdropClick&&n.onBackdropClick(...d),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":s.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:o[1]||(o[1]=e.withModifiers((...d)=>n.onBackdropClick&&n.onBackdropClick(...d),["self"]))},[e.createVNode(l,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[s.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",T,e.toDisplayString(s.title),1)])])),e.createElementVNode("div",z,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!s.removeCloseButton&&s.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:o[0]||(o[0]=(...d)=>n.close&&n.close(...d))},N)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,S),[[e.vShow,i.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const y=p(M,[["render",j]]),K={install(t){t.component("VsModal",y)}};a.default=y,a.plugin=K,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-modal-styles",o.appendChild(document.createTextNode(".vs-focus-container__focus-redirector,.vs-focus-container__last-focusable{opacity:0;position:absolute}.vs-focus-container__content{outline:none}[data-theme=dark] .vs-modal,.dark .vs-modal{--vs-modal-border: #39434b;--vs-modal-bg: #1c2227;--vs-modal-mask-bg: rgba(10, 13, 14, .8)}.vs-modal{font-size:.875em;--vs-modal-border-radius: 4px;--vs-modal-border: #d8dcde;--vs-modal-bg: #ffffff;--vs-modal-mask-bg: rgba($color-black, .5)}.vs-modal.is-aligned-top .vs-modal__wrapper{vertical-align:initial}.vs-modal.is-aligned-top.has-footer .vs-modal__body,.vs-modal.has-footer .vs-modal__body{max-height:calc(100vh - 125px)}.vs-modal:not(.has-footer) .vs-modal__body{padding:0 24px 20px}.vs-modal--is-open{overflow:hidden}.vs-modal.is-backdrop-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.vs-modal__mask{display:table;position:fixed;z-index:800;top:0;left:0;width:100%;height:100vh;transition:opacity .3s ease;background-color:#33333380}.vs-modal__wrapper{display:table-cell;overflow-x:hidden;text-align:center;vertical-align:middle}.vs-modal__wrapper.has-dummy-scrollbar{overflow-y:scroll}.vs-modal__container{display:inline-block;position:relative;width:530px;max-width:100vw;max-height:100vh;margin:0 auto;padding:0;overflow:hidden;transition:all .3s ease;border-radius:var(--vs-modal-border-radius);outline:none;background-color:var(--vs-modal-bg);border:solid 1px var(--vs-modal-border);box-shadow:0 2px 8px #33333354;text-align:initial}.vs-modal__header{display:flex;position:relative;z-index:1;align-items:center;min-height:55px;padding:0 24px}.vs-modal__header-text{display:flex;flex-grow:1;align-items:center;margin:0;font-size:1.125em;font-weight:400}.vs-modal__close-button button{position:absolute;z-index:100;top:20px;right:20px;background:none;border:none;text-align:right;margin:0;padding:0;cursor:pointer}.vs-modal__close-button button img{width:12px;height:12px}.vs-modal__body{max-height:calc(100vh - 55px);padding:16px 24px;overflow-y:auto}.vs-modal__footer{display:flex;align-items:center;justify-content:flex-end;height:70px;padding:0 24px}.vs-modal--size-s>.vs-modal__wrapper>.vs-modal__container{width:320px}.vs-modal--size-l>.vs-modal__wrapper>.vs-modal__container{width:850px}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container{width:100vw;border-radius:0}.vs-modal--size-fullscreen>.vs-modal__wrapper>.vs-modal__container .vs-modal__body{height:100vh;max-height:100vh}.vs-modal--size-auto>.vs-modal__wrapper>.vs-modal__container{width:initial}.vs-modal--transition-fade-enter-from,.vs-modal--transition-fade-leave-active,.vs-modal--transition-slide-up-enter-from,.vs-modal--transition-slide-up-leave-active{opacity:0}.vs-modal--transition-slide-up-enter-from .vs-modal__container,.vs-modal--transition-slide-up-leave-active .vs-modal__container{transform:translateY(20px)}.vs-modal--transition-slide-down-enter-from,.vs-modal--transition-slide-down-leave-active{opacity:0}.vs-modal--transition-slide-down-enter-from .vs-modal__container,.vs-modal--transition-slide-down-leave-active .vs-modal__container{transform:translateY(-20px)}")),document.head.appendChild(o)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VsModal={},i.Vue))})(this,function(i,e){"use strict";const K="",m=(t,s)=>{const o=t.__vccOpts||t;for(const[l,r]of s)o[l]=r;return o},b={name:"VsFocusContainer",props:{containFocus:{type:Boolean,default:!0},focusRedirector:Function,disabled:{type:Boolean,default:!1},tag:{type:String,default:"div"},lazy:{type:Boolean,default:!1}},computed:{renderRedirector(){return this.disabled?!1:this.lazy?this.containFocus:!0}},methods:{focus(){this.$refs.content.focus()},redirectFocus(t,s){if(!this.containFocus){this.$emit("focus-overflow",t,s);return}if(t.stopPropagation(),this.focusRedirector){this.focusRedirector(t,s);return}s.isTabbingForward?this.$refs.content.focus():this.$refs.lastFocusable.focus()}}},B={ref:"content",class:"vs-focus-container__content",tabindex:"-1"},k={key:1,ref:"lastFocusable",class:"vs-focus-container__last-focusable",tabindex:"-1"};function O(t,s,o,l,r,n){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.tag),{class:"vs-focus-container"},{default:e.withCtx(()=>[n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:0,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[0]||(s[0]=a=>n.redirectFocus(a,{isTabbingForward:!1}))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(t.$slots,"default")],512),!o.disabled&&o.containFocus?(e.openBlock(),e.createElementBlock("span",k,null,512)):e.createCommentVNode("",!0),n.renderRedirector?(e.openBlock(),e.createElementBlock("span",{key:2,class:"vs-focus-container__focus-redirector",tabindex:"0",onFocus:s[1]||(s[1]=a=>n.redirectFocus(a,{isTabbingForward:!0}))},null,32)):e.createCommentVNode("",!0)]),_:3})}const E=m(b,[["render",O]]),A=/^\s+|\s+$/g,p=/\s+/g;function F(t){return t&&typeof t=="object"&&typeof t.nodeName=="string"&&t.nodeType===1}function h(t){return typeof HTMLElement=="object"?t instanceof HTMLElement:F(t)}function u(t){return h(t)?(t.getAttribute("class")||"").replace(A,"").split(p):[]}function d(t){return typeof t=="string"?t.replace(A,"").split(p):t}function f(t,s){h(t)&&t.setAttribute("class",d(s).join(" "))}function _(t,s){const o=u(t);return d(s).forEach(r=>{const n=o.indexOf(r);n!==-1&&o.splice(n,1)}),f(t,o),o}function M(t,s){const o=_(t,s),l=d(s);return o.push(...l),f(t,o),o}function y(t,s){const o=u(t);return d(s).every(r=>o.indexOf(r)!==-1)}const g={add:M,remove:_,contains:y,has:y,set:f,get:u},w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMAJeTmmCIcbPbyAQAAAOtJREFUSMeF1ksKwjAURuE6cF50BY4cC4oLEHQquAVXYIVs3wiFn3C4nA76SG+/PpLc2+l9fk7lsr3dp0c71QH79p2ubZmr85t+sgshCHTh1UIQaJe+DkFgmddNBZyyLYGRIAACAAgA2SeAAwI5OowBu/WaEJ95AI4BQBD4N6xEgFyQFsSTYDgJAmgkkFYCIACAAABiAEgAABGgIAIURICCCFAQAEAQYIDewh9SX9M/lH5q7yztbh8wOuR80Oqw94mjU88nr05/TyCagjyJaRr0RKqp2JO5lgMvKFqStKhpWbTC6qVZi7v+HvwAcK2oz9BduqwAAAAASUVORK5CYII=",q="",S={name:"VsModal",components:{VsFocusContainer:E},props:{title:{type:String,default:"Modal title"},alignTop:{type:Boolean,default:!1},alignTopMargin:{type:Number,default:60},size:{type:String,default:"m"},role:{type:String,default:"dialog"},transition:{type:String,default:"slide-up"},removeHeader:{type:Boolean,default:!1},removeCloseButton:{type:Boolean,default:!1},preventShift:{type:Boolean,default:!1},dismissible:{type:Boolean,default:!0},dismissOn:{type:String,default:"backdrop esc close-button"},backdropBlur:{type:Boolean,default:!1}},data(){return{isOpen:!1,lastFocusedElement:null}},computed:{classes(){return[`vs-modal--size-${this.size}`,{"has-footer":this.hasFooter},{"is-open":this.isOpen},{"is-aligned-top":this.alignTop},{"is-backdrop-blur":this.backdropBlur}]},alignTopStyle(){return this.alignTop?{"padding-top":`${this.alignTopMargin}px`}:null},toggleTransition(){return`vs-modal--transition-${this.transition}`},hasFooter(){return!!this.$slots.footer},dismissOnBackdrop(){return this.dismissOn.indexOf("backdrop")>-1},dismissOnCloseButton(){return this.dismissOn.indexOf("close-button")>-1},dismissOnEsc(){return this.dismissOn.indexOf("esc")>-1}},watch:{isOpen(){this.$nextTick(()=>{this[this.isOpen?"onOpen":"onClose"]()})}},beforeDestroy(){this.isOpen&&this.returnFocus()},methods:{open(){this.isOpen=!0},close(){this.dismissible&&(this.isOpen=!1)},redirectFocus(){this.$refs.focusContainer.focus()},returnFocus(){this.lastFocusedElement&&this.lastFocusedElement.focus()},onBackdropClick(){this.dismissOnBackdrop?this.close():this.redirectFocus()},onEsc(){this.dismissOnEsc&&this.close()},onOpen(){this.lastFocusedElement=document.activeElement,this.$refs.focusContainer.focus(),g.add(document.body,"vs-modal--is-open"),this.incrementOpenModalCount(),this.$emit("open")},onClose(){this.$emit("close"),this.returnFocus()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide"),this.decrementOpenModalCount()===0&&g.remove(document.body,"vs-modal--is-open")},getOpenModalCount(){const t=document.body.getAttribute("data-open-modals");return t===void 0?0:Number(t)},setOpenModalCount(t){const s=Math.max(0,t);return s===0?document.body.removeAttribute("data-open-modals"):document.body.setAttribute("data-open-modals",s),s},incrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()+1)},decrementOpenModalCount(){return this.setOpenModalCount(this.getOpenModalCount()-1)}}},V=["role"],T={key:0,class:"vs-modal__header"},N={class:"vs-modal__header-text"},v={class:"vs-modal__close-button"},x=[e.createElementVNode("img",{src:w,alt:"close"},null,-1)],R={class:"vs-modal__body"},I={key:1,class:"vs-modal__footer"};function z(t,s,o,l,r,n){const a=e.resolveComponent("vs-focus-container");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vs-modal vs-modal__mask",n.classes]),role:o.role,onClick:s[2]||(s[2]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createElementVNode("div",{class:e.normalizeClass(["vs-modal__wrapper",{"has-dummy-scrollbar":o.preventShift}]),style:e.normalizeStyle(n.alignTopStyle),onClick:s[1]||(s[1]=e.withModifiers((...c)=>n.onBackdropClick&&n.onBackdropClick(...c),["self"]))},[e.createVNode(a,{ref:"focusContainer",class:"vs-modal__container",tabindex:"-1",onKeydown:e.withKeys(e.withModifiers(n.onEsc,["stop"]),["native","esc"])},{default:e.withCtx(()=>[o.removeHeader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",T,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("h2",N,e.toDisplayString(o.title),1)])])),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"close",{},()=>[n.dismissOnCloseButton&&!o.removeCloseButton&&o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:s[0]||(s[0]=(...c)=>n.close&&n.close(...c))},x)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",R,[e.renderSlot(t.$slots,"default")]),n.hasFooter?(e.openBlock(),e.createElementBlock("div",I,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["onKeydown"])],6)],10,V),[[e.vShow,r.isOpen]])]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const C=m(S,[["render",z]]),j={install(t){t.component("VsModal",C)}};i.default=C,i.plugin=j,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-modal",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.7",
|
|
4
4
|
"description": "A simple vue modal. Perfect for all your modal/ dialogs scenarios.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"url": "git+https://github.com/ashwinkshenoy/vue-simple.git"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
24
|
-
"registry": "https://registry.npmjs.org"
|
|
24
|
+
"registry": "https://registry.npmjs.org",
|
|
25
|
+
"access": "public"
|
|
25
26
|
},
|
|
26
27
|
"keywords": [
|
|
27
28
|
"vue",
|
|
@@ -42,5 +43,5 @@
|
|
|
42
43
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
43
44
|
},
|
|
44
45
|
"homepage": "https://github.com/ashwinkshenoy/vue-simple",
|
|
45
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "2002c260f34ce422b53c85326fbac4ae675a5cb5"
|
|
46
47
|
}
|