mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Remove occurences of vue-portal
I don't quite get the reason for having `vue-portal`. Maybe to ensure, the modal get's rendered only once? If yes, then I would suggest to give the user the responsibility to render only one modal at a time.
This commit is contained in:
Robert Schäfer
parent
02f34f0fcf
commit
f6fbe058f6
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=/babel-standalone.js></script><title>Human Connection - Styleguide</title><link href=/css/app.7bfbd875.css rel=preload as=style><link href=/css/chunk-vendors.26c7146d.css rel=preload as=style><link href=/js/app.65d83aa0.js rel=preload as=script><link href=/js/chunk-vendors.9fb0edf9.js rel=preload as=script><link href=/css/chunk-vendors.26c7146d.css rel=stylesheet><link href=/css/app.7bfbd875.css rel=stylesheet></head><body><noscript><strong>We're sorry but this CION doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.9fb0edf9.js></script><script src=/js/app.65d83aa0.js></script></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=/babel-standalone.js></script><title>Human Connection - Styleguide</title><link href=/css/app.a55670c3.css rel=preload as=style><link href=/css/chunk-vendors.26c7146d.css rel=preload as=style><link href=/js/app.2b144647.js rel=preload as=script><link href=/js/chunk-vendors.8cfd4731.js rel=preload as=script><link href=/css/chunk-vendors.26c7146d.css rel=stylesheet><link href=/css/app.a55670c3.css rel=stylesheet></head><body><noscript><strong>We're sorry but this CION doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.8cfd4731.js></script><script src=/js/app.2b144647.js></script></body></html>
|
||||
@ -18,7 +18,6 @@
|
||||
"access": "public"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"portal-vue": "1.x",
|
||||
"vue": "2.6.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,75 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<portal to="modal">
|
||||
<div
|
||||
:key="key"
|
||||
class="ds-modal-wrapper">
|
||||
<transition
|
||||
name="ds-transition-fade"
|
||||
appear>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="ds-modal-backdrop"
|
||||
ref="backdrop"
|
||||
@click="backdropHandler"
|
||||
>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
<transition
|
||||
name="ds-transition-modal-appear"
|
||||
appear>
|
||||
<ds-card
|
||||
v-if="isOpen"
|
||||
class="ds-modal"
|
||||
:class="[extended && 'ds-modal-extended']"
|
||||
:header="title"
|
||||
tableindex="-1"
|
||||
role="dialog"
|
||||
ref="modal"
|
||||
style="display: block"
|
||||
>
|
||||
<ds-button
|
||||
v-if="!force"
|
||||
class="ds-modal-close"
|
||||
ghost
|
||||
size="small"
|
||||
icon="close"
|
||||
aria-hidden="true"
|
||||
@click="cancel('close')"
|
||||
/>
|
||||
<!-- @slot Modal content -->
|
||||
<slot ref="modalBody"/>
|
||||
<template slot="footer">
|
||||
<!-- @slot Modal footer with action buttons -->
|
||||
<slot
|
||||
name="footer"
|
||||
:confirm="confirm"
|
||||
:cancel="cancel"
|
||||
:cancelLabel="cancelLabel"
|
||||
:confirmLabel="confirmLabel"
|
||||
>
|
||||
<ds-button
|
||||
ghost
|
||||
icon="close"
|
||||
@click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
|
||||
<ds-button
|
||||
primary
|
||||
icon="check"
|
||||
@click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
|
||||
</slot>
|
||||
</template>
|
||||
</ds-card>
|
||||
</transition>
|
||||
</div>
|
||||
</portal>
|
||||
<div
|
||||
:key="key"
|
||||
class="ds-modal-wrapper">
|
||||
<transition
|
||||
name="ds-transition-fade"
|
||||
appear>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="ds-modal-backdrop"
|
||||
ref="backdrop"
|
||||
@click="backdropHandler"
|
||||
>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
<transition
|
||||
name="ds-transition-modal-appear"
|
||||
appear>
|
||||
<ds-card
|
||||
v-if="isOpen"
|
||||
class="ds-modal"
|
||||
:class="[extended && 'ds-modal-extended']"
|
||||
:header="title"
|
||||
tableindex="-1"
|
||||
role="dialog"
|
||||
ref="modal"
|
||||
style="display: block"
|
||||
>
|
||||
<ds-button
|
||||
v-if="!force"
|
||||
class="ds-modal-close"
|
||||
ghost
|
||||
size="small"
|
||||
icon="close"
|
||||
aria-hidden="true"
|
||||
@click="cancel('close')"
|
||||
/>
|
||||
<!-- @slot Modal content -->
|
||||
<slot ref="modalBody"/>
|
||||
<template slot="footer">
|
||||
<!-- @slot Modal footer with action buttons -->
|
||||
<slot
|
||||
name="footer"
|
||||
:confirm="confirm"
|
||||
:cancel="cancel"
|
||||
:cancelLabel="cancelLabel"
|
||||
:confirmLabel="confirmLabel"
|
||||
>
|
||||
<ds-button
|
||||
ghost
|
||||
icon="close"
|
||||
@click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
|
||||
<ds-button
|
||||
primary
|
||||
icon="check"
|
||||
@click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
|
||||
</slot>
|
||||
</template>
|
||||
</ds-card>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import portal from 'portal-vue'
|
||||
Vue.use(portal)
|
||||
|
||||
/* eslint-disable no-empty */
|
||||
|
||||
|
||||
@ -2,11 +2,8 @@
|
||||
|
||||
Basic modal usage
|
||||
|
||||
You will need to add the portal-target to the end of your html body to get the modal working properly
|
||||
```html
|
||||
<!-- put the following tag as last element to your html body / layout -->
|
||||
<!-- make sure you only include it once! -->
|
||||
<portal-target name="modal" style="position: absolute" />
|
||||
<ds-modal style="position: absolute" />
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user