Merge branch 'release/0.1.0'

.circleci/config.yml

@@ -0,0 +1,45 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: cypress/base:8
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{.Branch}}-{{ checksum "package.json" }}
+            - v1-dependencies-{{.Branch}}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - ~/cache
+          key: v1-dependencies-{{.Branch}}-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn build
+      - run: yarn test:unit --coverage
+      - run: yarn test:e2e-ci
+      - store_artifacts:
+          path: /artifacts/e2e/video
+      - store_test_results:
+          path: ./coverage
+

.eslintignore

@@ -0,0 +1 @@
+package/

.gitignore

@@ -1,8 +1,8 @@
 .DS_Store
 node_modules
-/package/dist
 TODO.md
 
+/coverage
 /tests/e2e/videos/
 /tests/e2e/screenshots/
 

LICENCE

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

README.md

@@ -0,0 +1 @@
+package/README.md

babel.config.js

@@ -4,7 +4,8 @@ module.exports = {
       '@vue/app',
       {
         useBuiltIns: false,
-        ployfills: false,
+        polyfills: false,
+        corejs: 2,
       },
     ],
   ],

bili.config.js

@@ -0,0 +1,21 @@
+const { version } = require('./package/package.json')
+/** @type {import('bili').Config} */
+module.exports = {
+  banner: `
+/**
+ * vue-simple-portal
+ * version: ${version},
+ * (c) Thorsten Lünborg, ${new Date().getFullYear()}
+ * LICENCE: Apache-2.0
+ * http://github.com/linusborg/vue-simple-portal
+*/`,
+  plugins: {
+    commonjs: true,
+    vue: true,
+  },
+  // bundleNodeModules: true,
+  externals: ['nanoid'],
+  globals: {
+    vue: 'Vue',
+  },
+}

demo/App.vue

@@ -1,27 +1,24 @@
 <template>
-  <div id="app">
-    <img width="25%" src="./assets/logo.png" /> <br />
-    <button @click="showPortal = !showPortal">Toggle Render</button>
-    <button @click="disablePortal = !disablePortal">Toggle disabled</button>
-    <portal v-if="showPortal" :disabled="disablePortal">
-      <p>Test</p>
-      <Test />
-    </portal>
+  <div id="app" :data-selector="selector">
+    <h1>Demo App for VueSimplePortal</h1>
+    <nav class="nav">
+      <router-link to="/" exact>Base</router-link>
+      <router-link to="/disable">Disable</router-link>
+      <router-link to="/transition">Transition</router-link>
+      <router-link to="/multiple">Multiple</router-link>
+      <router-link to="/custom-target">Custom Target</router-link>
+    </nav>
     <hr />
+    <div id="content">
+      <router-view />
+    </div>
   </div>
 </template>
 
 <script>
-import Test from './components/TestComponent'
 export default {
   name: 'App',
-  components: {
-    Test,
-  },
-  data: () => ({
-    showPortal: true,
-    disablePortal: false,
-  }),
+  props: ['selector'],
 }
 </script>
 
@@ -30,8 +27,23 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  max-width: 850px;
+  min-height: calc(100vh - 400px);
+  border-bottom: 1px solid #ccc;
+}
+.nav {
+  margin-bottom: 30px;
+}
+
+.nav > a {
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.router-link-active {
+  font-weight: 500;
 }
 </style>

demo/components/Base.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Basic Use Case</h1>
+    <portal>
+      <Test />
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponent'
+export default {
+  name: 'Base',
+  components: {
+    Test,
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

demo/components/CustomTarget.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>Basic Use Case</h1>
+    <portal selector="#custom-target">
+      <Test />
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponent'
+export default {
+  name: 'Base',
+  components: {
+    Test,
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

demo/components/Disable.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1 dataTest="disable-h1">Disabled State</h1>
+    <portal disabled>
+      <Test />
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponent'
+export default {
+  name: 'Base',
+  components: {
+    Test,
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

demo/components/Multiple.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>Multiple Portals</h1>
+    <portal>
+      <Test />
+    </portal>
+    <br />
+    <portal prepend>
+      <p data-test="multiple-p">Test String from a second portal</p>
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponent'
+export default {
+  name: 'Base',
+  components: {
+    Test,
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

demo/components/TestComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3>This is just a Test Component</h3>
+    <h3 data-test="test-header">This is just a Test Component</h3>
     <p>
       Its purpose is to check the behaviour of components inside of the Simple
       Portal
@@ -11,14 +11,5 @@
 <script>
 export default {
   name: 'TestComponent',
-  /*mounted() {
-    console.log('TC:mounted')
-  },
-  updated() {
-    console.log('TC:updated')
-  },
-  beforeDestroy() {
-    console.log('TC:beforeDestroy')
-  },*/
 }
 </script>

demo/components/Transition.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>Transitions</h1>
+    <button id="toggle-button" @click="toggle = !toggle">Toggle</button>
+    <portal>
+      <transition name="fade">
+        <Test v-if="toggle" />
+      </transition>
+    </portal>
+  </div>
+</template>
+
+<script>
+import Test from './TestComponent'
+export default {
+  name: 'Base',
+  components: {
+    Test,
+  },
+  data: () => ({
+    toggle: false,
+  }),
+}
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>