mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-02-06 09:55:50 +00:00
Merge pull request #34 from Human-Connection/remove_portal
Remove vue-portal
This commit is contained in:
Grzegorz Leoniec
GitHub
commit
fd83399e70
File diff suppressed because one or more lines are too long
@ -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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@human-connection/styleguide",
|
||||
"version": "0.5.10",
|
||||
"version": "0.5.11",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "http-server ./docs -o -s",
|
||||
@ -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