Merge branch 'dev' of github.com:quasarframework/quasar into dev

Author: rstoenescu

docs/src/examples/DomMorph/FabCard.vue docs/src/examples/MorphUtils/FabCard.vuedocs/src/examples/DomMorph/FabCard.vue renamed to docs/src/examples/MorphUtils/FabCard.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="q-pa-md">
     <div
-      class="fixed-full image-gallery__blinder bg-orange"
+      class="fixed-full image-gallery__blinder bg-grey-8"
       :class="indexZoomed !== void 0 ? 'image-gallery__blinder--active' : void 0"
       @click="zoomImage()"
     />
 
     <div
       class="row justify-center q-gutter-sm q-mx-auto scroll relative-position"
-      style="max-width: 80vw; max-height: 80vh; z-index: 1"
+      style="max-width: 80vw; max-height: 80vh"
     >
       <q-img
         v-for="(src, index) in images"
@@ -40,25 +40,27 @@
     width: 150px
     max-width: 20vw
     cursor: pointer
-    z-index: 2
 
     &-full
       width: 800px
       max-width: 70vw
-      z-index: 1000
+      z-index: 2002
       pointer-events: none
 
       &--active
         pointer-events: all
   &__blinder
     opacity: 0
-    z-index: 0
+    z-index: 2000
     pointer-events: none
     transition: opacity 0.3s ease-in-out
 
     &--active
-      opacity: 0.2
+      opacity: 0.6
       pointer-events: all
+
+      + div > .image-gallery__image
+        z-index: 2001
 </style>
 
 <script>
@@ -122,7 +124,7 @@ export default {
               waitFor: this.imgLoaded.promise,
               duration: 400,
               hideFromClone: true,
-              style: 'z-index: 1',
+              style: 'z-index: 2002',
               onReady: end => {
                 if (end === 'from' && this.indexZoomed === index) {
                   this.indexZoomed = void 0
@@ -148,7 +150,7 @@ export default {
           {
             duration: 200,
             keepToClone: true,
-            style: 'z-index: 1',
+            style: 'z-index: 2002',
             onReady: zoom
           }
         )

…s/src/examples/DomMorph/ImageGallery.vue …src/examples/MorphUtils/ImageGallery.vuedocs/src/examples/DomMorph/ImageGallery.vue renamed to docs/src/examples/MorphUtils/ImageGallery.vue docs/src/examples/DomMorph/ImageGallery.vue renamed to docs/src/examples/MorphUtils/ImageGallery.vue

@@ -72,12 +72,12 @@ If the `cancel` function is called after the end of the animation nothing will h
 
 ## Examples
 
-<doc-example title="Morphing the same element" file="DomMorph/SameElement" />
+<doc-example title="Morphing the same element" file="MorphUtils/SameElement" />
 
-<doc-example title="Morphing a QCard from a QFabAction" file="DomMorph/FabCard" />
+<doc-example title="Morphing a QCard from a QFabAction" file="MorphUtils/FabCard" />
 
-<doc-example title="Image gallery " file="DomMorph/ImageGallery" />
+<doc-example title="Image gallery " file="MorphUtils/ImageGallery" />
 
-<doc-example title="Horizontal image strip " file="DomMorph/ImageStripHorizontal" />
+<doc-example title="Horizontal image strip " file="MorphUtils/ImageStripHorizontal" />
 
-<doc-example title="Vertical image strip " file="DomMorph/ImageStripVertical" />
+<doc-example title="Vertical image strip " file="MorphUtils/ImageStripVertical" />

…amples/DomMorph/ImageStripHorizontal.vue …ples/MorphUtils/ImageStripHorizontal.vuedocs/src/examples/DomMorph/ImageStripHorizontal.vue renamed to docs/src/examples/MorphUtils/ImageStripHorizontal.vue docs/src/examples/DomMorph/ImageStripHorizontal.vue renamed to docs/src/examples/MorphUtils/ImageStripHorizontal.vue

@@ -118,6 +118,19 @@ const decoders = {
   }
 }
 
+function getAttributesAsStyle (el) {
+  const exceptions = ['d', 'style', 'width', 'height', 'rx', 'ry', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'points', 'class', 'xmlns', 'viewBox', 'id', 'name', 'transform', 'data-name']
+  let styleString = ''
+  for(let i = 0; i < el.attributes.length; ++i) {
+    const attr = el.attributes[i]
+    if (exceptions.includes(attr.nodeName) !== true) {
+      if (attr.nodeName === 'fill' && attr.nodeValue === 'currentColor') continue
+      styleString += `${attr.nodeName}:${attr.nodeValue};`
+    }
+  }
+  return styleString
+}
+
 function parseDom (el, pathsDefinitions) {
   const type = el.nodeName
 
@@ -135,7 +148,7 @@ function parseDom (el, pathsDefinitions) {
 
     const paths = {
       path: decoders[type](el),
-      style: el.getAttribute('style'),
+      style: el.getAttribute('style') || getAttributesAsStyle(el),
       transform: el.getAttribute('transform')
     }