@abi-software/gallery 0.3.2 → 0.3.4-beta.0

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.3.2",
+  "version": "0.3.4-beta.0",
+  "files": [
+    "dist/*",
+    "src/*",
+    "*.json",
+    "*.js"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/ABI-Software/mapcore-gallery.git"
@@ -13,7 +19,12 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "build-bundle": "vue-cli-service build --target lib --name gallery src/main-bundle.js --skip-plugins @vue/cli-plugin-eslint",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish",
+    "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
+    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
   "main": "dist/gallery.common.js",
   "dependencies": {
@@ -21,24 +32,27 @@
     "axios": "^0.26.1",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^2.0.1",
-    "core-js": "^3.8.3",
+    "core-js": "^3.30.1",
     "element-ui": "^2.15.0",
-    "vue": "^2.6.11"
+    "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-plugin-unit-jest": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.1.2",
+    "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.0.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
+    "sass-loader": "^8.0.2",
     "vue-svg-inline-loader": "^2.1.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.10"
   }
 }

package/src/assets/_variables.scss

@@ -0,0 +1,43 @@
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple;
+$app-secondary-color: $darkBlue;
+$text-color: $grey;
+$input-text: $grey;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';

package/src/components/Card.vue

@@ -162,6 +162,13 @@ export default {
       },
     },
   },
+  updated: function () {
+    if (!this.tooltipCalculated) {
+      this.$nextTick(() => {
+        this.calculateShowTooltip()
+      })
+    }
+  },
   methods: {
     /**
      * Open a new link if link is provide.
@@ -227,17 +234,16 @@ export default {
       }
     },
   },
-  updated: function () {
-    if (!this.tooltipCalculated) {
-      this.$nextTick(() => {
-        this.calculateShowTooltip()
-      })
-    }
-  },
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '~element-ui/packages/theme-chalk/src/button';
+@import '~element-ui/packages/theme-chalk/src/card';
+@import '~element-ui/packages/theme-chalk/src/loading';
+@import '~element-ui/packages/theme-chalk/src/popover';
+@import '~element-ui/packages/theme-chalk/src/tooltip';
+
 .button,
 .button:hover,
 .button:focus {
@@ -249,15 +255,15 @@ export default {
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  background-color: #8300bf;
-  border: #8300bf;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
   color: white;
   cursor: pointer;
   margin-top: 8px;
 }
 
 .button:hover {
-  background: #8300bf;
+  background: $app-primary-color;
   box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.25);
   color: #fff;
 }
@@ -301,14 +307,14 @@ p.bold {
   width: 0;
   height: 0;
   border-left: solid transparent;
-  border-top: solid #8300bf;
+  border-top: solid $app-primary-color;
 }
 </style>
 
-<style>
+<style lang="scss">
 .gallery-popper {
   background: #f3ecf6 !important;
-  border: 1px solid #8300bf;
+  border: 1px solid $app-primary-color;
   border-radius: 4px;
   color: #303133 !important;
   font-size: 12px;
@@ -317,7 +323,7 @@ p.bold {
   padding: 10px;
 }
 .gallery-popper.el-popper[x-placement^='top'] .popper__arrow {
-  border-top-color: #8300bf !important;
+  border-top-color: $app-primary-color !important;
 }
 .gallery-popper.el-popper[x-placement^='top'] .popper__arrow:after {
   border-top-color: #f3ecf6 !important;

package/src/components/Gallery.vue

@@ -198,7 +198,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .oval {
   width: 2rem;
   height: 2rem;
@@ -227,7 +227,7 @@ export default {
 .progress-button {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #8300bf;
+  color: $app-primary-color;
 }
 
 .filler {

package/src/components/IndexIndicator.vue

@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .indicator-container {
   display: flex;
   justify-content: center;
@@ -40,6 +40,6 @@ export default {
 }
 
 .indicator.active {
-  background-color: #8300bf;
+  background-color: $app-primary-color;
 }
 </style>

package/vue.config.js

@@ -16,4 +16,12 @@ module.exports = {
       })
       .end()
   },
+  css: {
+    //Import variables into all stylesheets.
+    loaderOptions: {
+      sass: {
+        prependData: `@import '@/assets/styles';`
+      }
+    }
+  }
 }

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "printWidth": 150
-}

package/public/index.html

@@ -1,17 +0,0 @@
-<!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.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

package/tests/unit/example.spec.js

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
-    })
-    expect(wrapper.text()).toMatch(msg)
-  })
-})