@abi-software/gallery 0.3.0-beta.0 → 0.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.3.0-beta.0",
+  "version": "0.3.0-beta.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/hsorby/mapcore-gallery.git"
@@ -36,7 +36,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.2.1",
-    "svg-inline-loader": "^0.8.2",
+    "vue-svg-inline-loader": "^2.1.3",
     "vue-template-compiler": "^2.6.11"
   }
 }

package/src/components/Card.vue

@@ -1,8 +1,9 @@
 <template>
   <el-card :shadow="shadow" :body-style="bodyStyle" :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
     <div v-loading="!isReady">
-      <div :style="imageStyle">
-        <img :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
+      <div :style="imageContainerStyle">
+        <img v-if="useDefaultImg" src="../assets/logo-sparc-wave-primary.svg" svg-inline :style="imageStyle" />
+        <img v-else :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
       </div>
       <div v-if="false" class="image-overlay">
         <div
@@ -92,6 +93,12 @@ export default {
         return {}
       },
     },
+    imageContainerStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
     shadow: {
       type: String,
       default: 'always',
@@ -102,12 +109,12 @@ export default {
       ro: null,
       triangleSize: 4,
       thumbnail: undefined,
-      defaultImg: require('svg-inline-loader?classPrefix!../assets/logo-sparc-wave-primary.svg'),
+      useDefaultImg: false,
     }
   },
   computed: {
     isReady() {
-      return this.data.title && this.thumbnail && (this.data.link || this.data.userData)
+      return this.data.title && (this.thumbnail || this.useDefaultImg) && (this.data.link || this.data.userData)
     },
     imageHeight() {
       return this.showCardDetails ? this.height * 0.525 : this.height
@@ -158,7 +165,7 @@ export default {
             info.fetchAttempts += 1
             this.downloadThumbnail(url, info)
           } else {
-            this.thumbnail = this.defaultImg
+            this.useDefaultImg = true
           }
         }
       )
@@ -170,6 +177,7 @@ export default {
       immediate: true,
       handler: function () {
         this.thumbnail = undefined
+        this.useDefaultImg = false
         if (this.data.thumbnail) {
           if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {
             this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })
@@ -177,7 +185,7 @@ export default {
             this.thumbnail = this.data.thumbnail
           }
         } else {
-          this.thumbnail = this.defaultImg
+          this.useDefaultImg = true
         }
       },
     },

package/src/components/Gallery.vue

@@ -11,6 +11,7 @@
           <card
             :data="item"
             :body-style="bodyStyle"
+            :image-container-style="imageContainerStyle"
             :image-style="imageStyle"
             :width="cardWidth"
             :height="cardHeight"
@@ -84,6 +85,12 @@ export default {
         return { minHeight: '4rem' }
       },
     },
+    imageContainerStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
     imageStyle: {
       type: Object,
       default: () => {

package/vue.config.js

@@ -3,10 +3,9 @@ module.exports = {
   chainWebpack: config => {
     // GraphQL Loader
     config.module
-      .rule('svg')
-      .test(/\.(svg)$/i)
-      .use('svg-inline-loader')
-        .loader('svg-inline-loader')
+      .rule('vue')
+      .use('vue-svg-inline-loader')
+        .loader('vue-svg-inline-loader')
         .end()
   },
   css: { extract: false },

package/dist/img/logo-sparc-wave-primary.d50bcaff.svg

@@ -1 +0,0 @@
-module.exports = "<svg id=\"logo-sparc-wave-primary\" data-name=\"logo-sparc-wave-primary\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 400 190.5854\"><defs><linearGradient id=\"linear-gradient\" y1=\"96.3505\" x2=\"400\" y2=\"96.3505\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#0b00bf\"></stop><stop offset=\"1\" stop-color=\"#bc00fc\"></stop></linearGradient></defs><title>SPARC Logo</title><path d=\"M396.6976,128.6248l-146.2735-3.38a6.5358,6.5358,0,0,0-6.1378,3.9236l-.0612.1407-13.673,31.4482L202.9416,9.5333l-.01-.0685a8.9823,8.9823,0,0,0-17.6624-.0114L163.673,125.3819,3.298,129.2886a3.38,3.38,0,0,0,.0269,6.7592L169.34,138.7635a6.5939,6.5939,0,0,0,6.5373-5.1457l.0571-.2546,17.8534-79.5649L221.26,185.1237l.0256.1243A6.7593,6.7593,0,0,0,234.092,186.52L254.9005,138.66l141.7971-3.2762a3.3805,3.3805,0,0,0,0-6.7592Z\" style=\"fill:url(#linear-gradient)\"></path><path d=\"M25.6793,0C41.3957,0,51.057,10.0926,51.057,26.0972v9.5162H36.2053V26.0972c0-7.3532-3.8945-11.8219-10.526-11.8219-6.7768,0-10.6691,4.4687-10.6691,11.8219,0,3.8945,1.2982,7.3533,5.4786,11.3908l19.754,18.601C46.5861,62.1441,52.21,68.7778,52.21,79.88c0,16.0047-9.95,26.0973-25.9543,26.0973C10.108,105.9776.1585,95.885.1585,79.88V70.362H15.01V79.88c0,7.3533,4.0375,11.822,11.2455,11.822,7.065,0,11.1025-4.4687,11.1025-11.822,0-4.4709-2.1628-8.6514-6.0551-12.2576L11.1158,48.7357C3.043,41.2372.1585,34.8939.1585,25.666.1585,10.0926,9.82,0,25.6793,0Z\" style=\"fill:#0e0e19\"></path><path d=\"M99.7971,69.7856v35.1821H84.9454V1.01h25.3755c16.0047,0,26.0973,10.0926,26.0973,26.0973V43.6883c0,16.15-10.0926,26.0973-26.0973,26.0973Zm10.3808-13.9849c7.2081,0,11.3908-4.3257,11.3908-11.6789V26.6759c0-7.21-4.1827-11.6811-11.3908-11.6811H99.7971V55.8007Z\" style=\"fill:#0e0e19\"></path><path d=\"M278.5812,108.147H263.73V4.1893h26.0972c16.0047,0,26.0973,10.0926,26.0973,26.0972v14.13c0,9.95-4.3257,17.7363-11.3908,22.205,4.1827,12.6889,10.0926,29.9917,13.8418,41.5254h-15.14L290.6914,70.3708h-12.11Zm11.1-51.7632c7.21,0,11.3907-4.3257,11.3907-11.5338V29.8553c0-7.21-4.18-11.6812-11.3907-11.6812h-11.1v38.21Z\" style=\"fill:#0e0e19\"></path><path d=\"M399.844,73.5414V83.06c0,16.0047-9.9474,26.0973-25.9521,26.0973-16.15,0-26.0972-10.0926-26.0972-26.0973V29.2766c0-16.0046,9.9473-26.0972,26.0972-26.0972,16.0047,0,25.9521,10.0926,25.9521,26.0972v9.5161h-14.85V29.2766c0-7.3532-4.0374-11.822-11.1025-11.822-7.21,0-11.2477,4.4688-11.2477,11.822V83.06c0,7.3533,4.0375,11.822,11.2477,11.822,7.0651,0,11.1025-4.4687,11.1025-11.822V73.5414Z\" style=\"fill:#0e0e19\"></path></svg>"