Skip to content

Commit fb31df2

Browse files
LinusBorgLinusBorg
committed
Merge branch 'release/0.1.0'
2 parents 2246b99 + dd91bf3 commit fb31df2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5702
-903
lines changed

‎.circleci/config.yml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Javascript Node CircleCI 2.0 configuration file
2+
#
3+
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
4+
#
5+
version: 2
6+
jobs:
7+
build:
8+
docker:
9+
# specify the version you desire here
10+
- image: cypress/base:8
11+
12+
# Specify service dependencies here if necessary
13+
# CircleCI maintains a library of pre-built images
14+
# documented at https://circleci.com/docs/2.0/circleci-images/
15+
# - image: circleci/mongo:3.4.4
16+
17+
working_directory: ~/repo
18+
19+
steps:
20+
- checkout
21+
22+
# Download and cache dependencies
23+
- restore_cache:
24+
keys:
25+
- v1-dependencies-{{.Branch}}-{{ checksum "package.json" }}
26+
- v1-dependencies-{{.Branch}}
27+
# fallback to using the latest cache if no exact match is found
28+
- v1-dependencies-
29+
30+
- run: yarn install
31+
32+
- save_cache:
33+
paths:
34+
- ~/cache
35+
key: v1-dependencies-{{.Branch}}-{{ checksum "package.json" }}
36+
37+
# run tests!
38+
- run: yarn build
39+
- run: yarn test:unit --coverage
40+
- run: yarn test:e2e-ci
41+
- store_artifacts:
42+
path: /artifacts/e2e/video
43+
- store_test_results:
44+
path: ./coverage
45+

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package/

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.DS_Store
22
node_modules
3-
/package/dist
43
TODO.md
54

5+
/coverage
66
/tests/e2e/videos/
77
/tests/e2e/screenshots/
88

‎LICENCE

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Copyright 2019 Thorsten Lünborg
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.

‎README.md

-39
This file was deleted.

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package/README.md

‎babel.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ module.exports = {
44
'@vue/app',
55
{
66
useBuiltIns: false,
7-
ployfills: false,
7+
polyfills: false,
8+
corejs: 2,
89
},
910
],
1011
],

‎bili.config.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const { version } = require('./package/package.json')
2+
/** @type {import('bili').Config} */
3+
module.exports = {
4+
banner: `
5+
/**
6+
* vue-simple-portal
7+
* version: ${version},
8+
* (c) Thorsten Lünborg, ${new Date().getFullYear()}
9+
* LICENCE: Apache-2.0
10+
* http://github.com/linusborg/vue-simple-portal
11+
*/`,
12+
plugins: {
13+
commonjs: true,
14+
vue: true,
15+
},
16+
// bundleNodeModules: true,
17+
externals: ['nanoid'],
18+
globals: {
19+
vue: 'Vue',
20+
},
21+
}

‎demo/App.vue

+29-17
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
<template>
2-
<div id="app">
3-
<img width="25%" src="./assets/logo.png" /> <br />
4-
<button @click="showPortal = !showPortal">Toggle Render</button>
5-
<button @click="disablePortal = !disablePortal">Toggle disabled</button>
6-
<portal v-if="showPortal" :disabled="disablePortal">
7-
<p>Test</p>
8-
<Test />
9-
</portal>
2+
<div id="app" :data-selector="selector">
3+
<h1>Demo App for VueSimplePortal</h1>
4+
<nav class="nav">
5+
<router-link to="/" exact>Base</router-link>
6+
<router-link to="/disable">Disable</router-link>
7+
<router-link to="/transition">Transition</router-link>
8+
<router-link to="/multiple">Multiple</router-link>
9+
<router-link to="/custom-target">Custom Target</router-link>
10+
</nav>
1011
<hr />
12+
<div id="content">
13+
<router-view />
14+
</div>
1115
</div>
1216
</template>
1317

1418
<script>
15-
import Test from './components/TestComponent'
1619
export default {
1720
name: 'App',
18-
components: {
19-
Test,
20-
},
21-
data: () => ({
22-
showPortal: true,
23-
disablePortal: false,
24-
}),
21+
props: ['selector'],
2522
}
2623
</script>
2724

@@ -30,8 +27,23 @@ export default {
3027
font-family: 'Avenir', Helvetica, Arial, sans-serif;
3128
-webkit-font-smoothing: antialiased;
3229
-moz-osx-font-smoothing: grayscale;
33-
text-align: center;
3430
color: #2c3e50;
3531
margin-top: 60px;
32+
max-width: 850px;
33+
min-height: calc(100vh - 400px);
34+
border-bottom: 1px solid #ccc;
35+
}
36+
.nav {
37+
margin-bottom: 30px;
38+
}
39+
40+
.nav > a {
41+
text-decoration: none;
42+
display: inline-block;
43+
margin-right: 10px;
44+
}
45+
46+
.router-link-active {
47+
font-weight: 500;
3648
}
3749
</style>

‎demo/components/Base.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<h1>Basic Use Case</h1>
4+
<portal>
5+
<Test />
6+
</portal>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import Test from './TestComponent'
12+
export default {
13+
name: 'Base',
14+
components: {
15+
Test,
16+
},
17+
}
18+
</script>
19+
20+
<style lang="scss" scoped></style>

‎demo/components/CustomTarget.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<h1>Basic Use Case</h1>
4+
<portal selector="#custom-target">
5+
<Test />
6+
</portal>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import Test from './TestComponent'
12+
export default {
13+
name: 'Base',
14+
components: {
15+
Test,
16+
},
17+
}
18+
</script>
19+
20+
<style lang="scss" scoped></style>

‎demo/components/Disable.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<h1 dataTest="disable-h1">Disabled State</h1>
4+
<portal disabled>
5+
<Test />
6+
</portal>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import Test from './TestComponent'
12+
export default {
13+
name: 'Base',
14+
components: {
15+
Test,
16+
},
17+
}
18+
</script>
19+
20+
<style lang="scss" scoped></style>

‎demo/components/Multiple.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<h1>Multiple Portals</h1>
4+
<portal>
5+
<Test />
6+
</portal>
7+
<br />
8+
<portal prepend>
9+
<p data-test="multiple-p">Test String from a second portal</p>
10+
</portal>
11+
</div>
12+
</template>
13+
14+
<script>
15+
import Test from './TestComponent'
16+
export default {
17+
name: 'Base',
18+
components: {
19+
Test,
20+
},
21+
}
22+
</script>
23+
24+
<style lang="scss" scoped></style>

‎demo/components/TestComponent.vue

+1-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<h3>This is just a Test Component</h3>
3+
<h3 data-test="test-header">This is just a Test Component</h3>
44
<p>
55
Its purpose is to check the behaviour of components inside of the Simple
66
Portal
@@ -11,14 +11,5 @@
1111
<script>
1212
export default {
1313
name: 'TestComponent',
14-
/*mounted() {
15-
console.log('TC:mounted')
16-
},
17-
updated() {
18-
console.log('TC:updated')
19-
},
20-
beforeDestroy() {
21-
console.log('TC:beforeDestroy')
22-
},*/
2314
}
2415
</script>

‎demo/components/Transition.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<h1>Transitions</h1>
4+
<button id="toggle-button" @click="toggle = !toggle">Toggle</button>
5+
<portal>
6+
<transition name="fade">
7+
<Test v-if="toggle" />
8+
</transition>
9+
</portal>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import Test from './TestComponent'
15+
export default {
16+
name: 'Base',
17+
components: {
18+
Test,
19+
},
20+
data: () => ({
21+
toggle: false,
22+
}),
23+
}
24+
</script>
25+
26+
<style>
27+
.fade-enter-active,
28+
.fade-leave-active {
29+
transition: opacity 0.4s;
30+
}
31+
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
32+
opacity: 0;
33+
}
34+
</style>

0 commit comments

Comments
 (0)