Skip to content

Commit fd83399

Browse files
appinteractiveappinteractive
authored
Merge pull request #34 from Human-Connection/remove_portal
Remove vue-portal
2 parents ce69fe5 + a100c09 commit fd83399

9 files changed

Lines changed: 64 additions & 116 deletions

File tree

‎docs/css/app.7bfbd875.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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>
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.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>

‎docs/js/app.65d83aa0.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/js/app.65d83aa0.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/js/chunk-vendors.9fb0edf9.js‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/js/chunk-vendors.9fb0edf9.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@human-connection/styleguide",
3-
"version": "0.5.10",
3+
"version": "0.5.11",
44
"private": false,
55
"scripts": {
66
"serve": "http-server ./docs -o -s",
@@ -18,7 +18,6 @@
1818
"access": "public"
1919
},
2020
"peerDependencies": {
21-
"portal-vue": "1.x",
2221
"vue": "2.6.x"
2322
},
2423
"devDependencies": {

‎src/system/components/layout/Modal/Modal.vue‎

Lines changed: 61 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,71 @@
11
<template>
22
<div>
3-
<portal to="modal">
4-
<div
5-
:key="key"
6-
class="ds-modal-wrapper">
7-
<transition
8-
name="ds-transition-fade"
9-
appear>
10-
<div
11-
v-if="isOpen"
12-
class="ds-modal-backdrop"
13-
ref="backdrop"
14-
@click="backdropHandler"
15-
>
16-
&nbsp;
17-
</div>
18-
</transition>
19-
<transition
20-
name="ds-transition-modal-appear"
21-
appear>
22-
<ds-card
23-
v-if="isOpen"
24-
class="ds-modal"
25-
:class="[extended && 'ds-modal-extended']"
26-
:header="title"
27-
tableindex="-1"
28-
role="dialog"
29-
ref="modal"
30-
style="display: block"
31-
>
32-
<ds-button
33-
v-if="!force"
34-
class="ds-modal-close"
35-
ghost
36-
size="small"
37-
icon="close"
38-
aria-hidden="true"
39-
@click="cancel('close')"
40-
/>
41-
<!-- @slot Modal content -->
42-
<slot ref="modalBody"/>
43-
<template slot="footer">
44-
<!-- @slot Modal footer with action buttons -->
45-
<slot
46-
name="footer"
47-
:confirm="confirm"
48-
:cancel="cancel"
49-
:cancelLabel="cancelLabel"
50-
:confirmLabel="confirmLabel"
51-
>
52-
<ds-button
53-
ghost
54-
icon="close"
55-
@click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
56-
<ds-button
57-
primary
58-
icon="check"
59-
@click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
60-
</slot>
61-
</template>
62-
</ds-card>
63-
</transition>
64-
</div>
65-
</portal>
3+
<div
4+
:key="key"
5+
class="ds-modal-wrapper">
6+
<transition
7+
name="ds-transition-fade"
8+
appear>
9+
<div
10+
v-if="isOpen"
11+
class="ds-modal-backdrop"
12+
ref="backdrop"
13+
@click="backdropHandler"
14+
>
15+
&nbsp;
16+
</div>
17+
</transition>
18+
<transition
19+
name="ds-transition-modal-appear"
20+
appear>
21+
<ds-card
22+
v-if="isOpen"
23+
class="ds-modal"
24+
:class="[extended && 'ds-modal-extended']"
25+
:header="title"
26+
tableindex="-1"
27+
role="dialog"
28+
ref="modal"
29+
style="display: block"
30+
>
31+
<ds-button
32+
v-if="!force"
33+
class="ds-modal-close"
34+
ghost
35+
size="small"
36+
icon="close"
37+
aria-hidden="true"
38+
@click="cancel('close')"
39+
/>
40+
<!-- @slot Modal content -->
41+
<slot ref="modalBody"/>
42+
<template slot="footer">
43+
<!-- @slot Modal footer with action buttons -->
44+
<slot
45+
name="footer"
46+
:confirm="confirm"
47+
:cancel="cancel"
48+
:cancelLabel="cancelLabel"
49+
:confirmLabel="confirmLabel"
50+
>
51+
<ds-button
52+
ghost
53+
icon="close"
54+
@click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
55+
<ds-button
56+
primary
57+
icon="check"
58+
@click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
59+
</slot>
60+
</template>
61+
</ds-card>
62+
</transition>
63+
</div>
6664
</div>
6765
</template>
6866

6967
<script>
7068
import Vue from 'vue'
71-
import portal from 'portal-vue'
72-
Vue.use(portal)
7369
7470
/* eslint-disable no-empty */
7571

‎src/system/components/layout/Modal/demo.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@
22

33
Basic modal usage
44

5-
You will need to add the portal-target to the end of your html body to get the modal working properly
65
```html
7-
<!-- put the following tag as last element to your html body / layout -->
8-
<!-- make sure you only include it once! -->
9-
<portal-target name="modal" style="position: absolute" />
6+
<ds-modal style="position: absolute" />
107
```
118

129
```

0 commit comments

Comments
 (0)