@abi-software/gallery 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/.browserslistrc +3 -3
  2. package/.eslintrc.js +31 -31
  3. package/.prettierrc +6 -6
  4. package/LICENSE +201 -201
  5. package/Meeting-plan.txt +4 -0
  6. package/README.md +35 -35
  7. package/babel.config.js +3 -3
  8. package/dist/gallery.common.js +62318 -1537
  9. package/dist/gallery.common.js.map +1 -1
  10. package/dist/gallery.umd.js +62316 -1535
  11. package/dist/gallery.umd.js.map +1 -1
  12. package/dist/gallery.umd.min.js +16 -1
  13. package/dist/gallery.umd.min.js.map +1 -1
  14. package/jest.config.js +3 -3
  15. package/package.json +41 -39
  16. package/public/index.html +17 -17
  17. package/src/App.vue +34 -28
  18. package/src/components/Card.vue +136 -128
  19. package/src/components/Gallery.vue +208 -208
  20. package/src/components/IndexIndicator.vue +45 -45
  21. package/src/delete.json +39 -0
  22. package/src/index.js +2 -2
  23. package/src/main-bundle.js +2 -0
  24. package/src/main.js +8 -2
  25. package/tests/unit/example.spec.js +12 -12
  26. package/vue.config.js +4 -4
package/jest.config.js CHANGED
@@ -1,3 +1,3 @@
1
- module.exports = {
2
- preset: '@vue/cli-plugin-unit-jest',
3
- }
1
+ module.exports = {
2
+ preset: '@vue/cli-plugin-unit-jest',
3
+ }
package/package.json CHANGED
@@ -1,39 +1,41 @@
1
- {
2
- "name": "@abi-software/gallery",
3
- "version": "0.2.1",
4
- "repository": {
5
- "type": "git",
6
- "url": "https://github.com/hsorby/mapcore-gallery.git"
7
- },
8
- "license": "Apache-2.0",
9
- "private": false,
10
- "scripts": {
11
- "serve": "vue-cli-service serve",
12
- "build": "vue-cli-service build",
13
- "test:unit": "vue-cli-service test:unit",
14
- "build-bundle": "vue-cli-service build --target lib --name gallery src/main.js",
15
- "lint": "vue-cli-service lint"
16
- },
17
- "main": "dist/gallery.common.js",
18
- "dependencies": {
19
- "@babel/code-frame": "^7.12.11",
20
- "core-js": "^3.8.3",
21
- "element-ui": "^2.15.0",
22
- "vue": "^2.6.11"
23
- },
24
- "devDependencies": {
25
- "@vue/cli-plugin-babel": "^4.5.11",
26
- "@vue/cli-plugin-eslint": "^3.1.1",
27
- "@vue/cli-plugin-unit-jest": "^4.5.13",
28
- "@vue/cli-service": "^4.5.13",
29
- "@vue/eslint-config-prettier": "^6.0.0",
30
- "@vue/test-utils": "^1.1.2",
31
- "babel-eslint": "^10.1.0",
32
- "eslint": "^6.0.0",
33
- "eslint-config-prettier": "^6.15.0",
34
- "eslint-plugin-prettier": "^3.3.1",
35
- "eslint-plugin-vue": "^6.2.2",
36
- "prettier": "^2.2.1",
37
- "vue-template-compiler": "^2.6.11"
38
- }
39
- }
1
+ {
2
+ "name": "@abi-software/gallery",
3
+ "version": "0.2.2",
4
+ "repository": {
5
+ "type": "git",
6
+ "url": "https://github.com/hsorby/mapcore-gallery.git"
7
+ },
8
+ "license": "Apache-2.0",
9
+ "private": false,
10
+ "scripts": {
11
+ "serve-no-lint": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
12
+ "build-dist": "vue-cli-service build",
13
+ "serve": "vue-cli-service serve",
14
+ "build": "vue-cli-service build",
15
+ "test:unit": "vue-cli-service test:unit",
16
+ "build-bundle": "vue-cli-service build --target lib --name gallery src/main-bundle.js --skip-plugins @vue/cli-plugin-eslint",
17
+ "lint": "vue-cli-service lint"
18
+ },
19
+ "main": "dist/gallery.common.js",
20
+ "dependencies": {
21
+ "@babel/code-frame": "^7.12.11",
22
+ "core-js": "^3.8.3",
23
+ "element-ui": "^2.15.0",
24
+ "vue": "^2.6.11"
25
+ },
26
+ "devDependencies": {
27
+ "@vue/cli-plugin-babel": "^4.5.11",
28
+ "@vue/cli-plugin-eslint": "^3.1.1",
29
+ "@vue/cli-plugin-unit-jest": "^4.5.13",
30
+ "@vue/cli-service": "^4.5.13",
31
+ "@vue/eslint-config-prettier": "^6.0.0",
32
+ "@vue/test-utils": "^1.1.2",
33
+ "babel-eslint": "^10.1.0",
34
+ "eslint": "^6.0.0",
35
+ "eslint-config-prettier": "^6.15.0",
36
+ "eslint-plugin-prettier": "^3.3.1",
37
+ "eslint-plugin-vue": "^6.2.2",
38
+ "prettier": "^2.2.1",
39
+ "vue-template-compiler": "^2.6.11"
40
+ }
41
+ }
package/public/index.html CHANGED
@@ -1,17 +1,17 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
- <title><%= htmlWebpackPlugin.options.title %></title>
9
- </head>
10
- <body>
11
- <noscript>
12
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
- </noscript>
14
- <div id="app"></div>
15
- <!-- built files will be auto injected -->
16
- </body>
17
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8
+ <title><%= htmlWebpackPlugin.options.title %></title>
9
+ </head>
10
+ <body>
11
+ <noscript>
12
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13
+ </noscript>
14
+ <div id="app"></div>
15
+ <!-- built files will be auto injected -->
16
+ </body>
17
+ </html>
package/src/App.vue CHANGED
@@ -1,28 +1,34 @@
1
- <template>
2
- <div id="app">
3
- <img alt="Vue logo" src="./assets/logo.png" />
4
- <HelloWorld msg="Welcome to Your Vue.js App" />
5
- </div>
6
- </template>
7
-
8
- <script>
9
- import HelloWorld from './components/HelloWorld.vue'
10
-
11
- export default {
12
- name: 'App',
13
- components: {
14
- HelloWorld,
15
- },
16
- }
17
- </script>
18
-
19
- <style scoped>
20
- #app {
21
- font-family: Avenir, Helvetica, Arial, sans-serif;
22
- -webkit-font-smoothing: antialiased;
23
- -moz-osx-font-smoothing: grayscale;
24
- text-align: center;
25
- color: #2c3e50;
26
- margin-top: 60px;
27
- }
28
- </style>
1
+ <template>
2
+ <div id="app">
3
+ <img alt="Vue logo" src="./assets/logo.png" />
4
+ <gallery :items="dataInput"/>
5
+ </div>
6
+ </template>
7
+
8
+ <script>
9
+ import Gallery from './components/Gallery'
10
+
11
+ export default {
12
+ name: 'App',
13
+ components: {
14
+ Gallery
15
+ },
16
+ data: function(){
17
+ return{
18
+ dataInput: [{name: 'test1', type: 'data'}, {name:'test2', type: 'data'}]
19
+
20
+ }
21
+ }
22
+ };
23
+ </script>
24
+
25
+ <style scoped>
26
+ #app {
27
+ font-family: Avenir, Helvetica, Arial, sans-serif;
28
+ -webkit-font-smoothing: antialiased;
29
+ -moz-osx-font-smoothing: grayscale;
30
+ text-align: center;
31
+ color: #2c3e50;
32
+ margin-top: 60px;
33
+ }
34
+ </style>
package/src/components/Card.vue CHANGED
@@ -1,128 +1,136 @@
1
- <template>
2
- <el-card :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
3
- <div v-loading="!isReady">
4
- <img :src="data.thumbnail" alt="thumbnail loading ..." />
5
- <div v-if="false" class="image-overlay">
6
- <div
7
- class="triangle-right-corner"
8
- :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
9
- @click="openLinkInNewTab"
10
- />
11
- <el-tooltip class="item" :content="`View ${data.type}`" placement="left">
12
- <img
13
- class="triangle-icon"
14
- :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
15
- :src="typeIcon"
16
- @click="openLinkInNewTab"
17
- />
18
- </el-tooltip>
19
- </div>
20
- <div v-if="showCardDetails" class="details">
21
- <p>
22
- <b>{{ data.type }}</b>
23
- </p>
24
- <el-tooltip :content="data.title" placement="top">
25
- <p class="title">
26
- {{ data.title }}
27
- </p>
28
- </el-tooltip>
29
- <el-button @click.prevent="openLinkInNewTab"> View {{ data.type }}</el-button>
30
- </div>
31
- </div>
32
- </el-card>
33
- </template>
34
-
35
- <script>
36
- export default {
37
- name: 'GalleryCard',
38
- props: {
39
- data: {
40
- type: Object,
41
- required: true,
42
- },
43
- width: {
44
- type: Number,
45
- default: 3,
46
- },
47
- height: {
48
- type: Number,
49
- default: 3,
50
- },
51
- showCardDetails: {
52
- type: Boolean,
53
- },
54
- },
55
- data() {
56
- return {
57
- ro: null,
58
- triangleSize: 4,
59
- }
60
- },
61
- computed: {
62
- isReady() {
63
- return this.data.title && this.data.thumbnail && this.data.link
64
- },
65
- imageHeight() {
66
- return this.showCardDetails ? this.height * 0.525 : this.height
67
- },
68
- imageWidth() {
69
- return this.width - 2 * this.marginDetails
70
- },
71
- triangleHeight() {
72
- return this.height * 0.237
73
- },
74
- marginDetails() {
75
- return this.height * 0.076
76
- },
77
- typeIcon() {
78
- return undefined
79
- },
80
- },
81
- methods: {
82
- openLinkInNewTab() {
83
- const link = document.createElement('a')
84
- link.href = this.data.link
85
- link.target = '_blank'
86
- document.body.appendChild(link)
87
- link.click()
88
- link.remove()
89
- },
90
- },
91
- }
92
- </script>
93
-
94
- <style scoped>
95
- .card {
96
- position: relative;
97
- }
98
- .details {
99
- text-align: left;
100
- }
101
-
102
- .title {
103
- overflow-x: hidden;
104
- text-overflow: ellipsis;
105
- white-space: nowrap;
106
- }
107
-
108
- p.bold {
109
- font-weight: bold;
110
- }
111
-
112
- .image-overlay {
113
- position: absolute;
114
- top: 0;
115
- right: 0;
116
- }
117
-
118
- .triangle-icon {
119
- position: absolute;
120
- }
121
-
122
- .triangle-right-corner {
123
- width: 0;
124
- height: 0;
125
- border-left: solid transparent;
126
- border-top: solid #8300bf;
127
- }
128
- </style>
1
+ <template>
2
+ <el-card :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
3
+ <div v-loading="!isReady">
4
+ <img :src="entry.thumbnail" alt="thumbnail loading ..." />
5
+ <div v-if="false" class="image-overlay">
6
+ <div
7
+ class="triangle-right-corner"
8
+ :style="`border-left-width: ${triangleHeight * 1.2}rem; border-top-width: ${triangleHeight}rem;`"
9
+ @click="openLinkInNewTab"
10
+ />
11
+ <el-tooltip class="item" :content="`View ${entry.type}`" placement="left">
12
+ <img
13
+ class="triangle-icon"
14
+ :style="`height: ${triangleHeight * 0.25}rem;top: ${triangleHeight * 0.15}rem;right: ${triangleHeight * 0.15}rem`"
15
+ :src="typeIcon"
16
+ @click="openLinkInNewTab"
17
+ />
18
+ </el-tooltip>
19
+ </div>
20
+ <div v-if="showCardDetails" class="details">
21
+ <p>
22
+ <b>{{ entry.type }}</b>
23
+ </p>
24
+ <el-tooltip :content="entry.title" placement="top">
25
+ <p class="title">
26
+ {{ entry.title }}
27
+ </p>
28
+ </el-tooltip>
29
+ <el-button @click.prevent="openLinkInNewTab"> View {{ entry.type }}</el-button>
30
+ </div>
31
+ </div>
32
+ </el-card>
33
+ </template>
34
+
35
+ <script>
36
+ import Vue from "vue";
37
+ import { Card, Button, Tooltip, Loading } from "element-ui";
38
+
39
+ Vue.use(Card)
40
+ Vue.use(Button)
41
+ Vue.use(Tooltip)
42
+ Vue.use(Loading)
43
+
44
+ export default {
45
+ name: 'GalleryCard',
46
+ props: {
47
+ entry: {
48
+ type: Object,
49
+ required: true,
50
+ },
51
+ width: {
52
+ type: Number,
53
+ default: 3,
54
+ },
55
+ height: {
56
+ type: Number,
57
+ default: 3,
58
+ },
59
+ showCardDetails: {
60
+ type: Boolean,
61
+ },
62
+ },
63
+ data() {
64
+ return {
65
+ ro: null,
66
+ triangleSize: 4,
67
+ }
68
+ },
69
+ computed: {
70
+ isReady() {
71
+ return this.entry.title && this.entry.thumbnail && this.entry.link
72
+ },
73
+ imageHeight() {
74
+ return this.showCardDetails ? this.height * 0.525 : this.height
75
+ },
76
+ imageWidth() {
77
+ return this.width - 2 * this.marginDetails
78
+ },
79
+ triangleHeight() {
80
+ return this.height * 0.237
81
+ },
82
+ marginDetails() {
83
+ return this.height * 0.076
84
+ },
85
+ typeIcon() {
86
+ return undefined
87
+ },
88
+ },
89
+ methods: {
90
+ openLinkInNewTab() {
91
+ const link = document.createElement('a')
92
+ link.href = this.entry.link
93
+ link.target = '_blank'
94
+ document.body.appendChild(link)
95
+ link.click()
96
+ link.remove()
97
+ },
98
+ },
99
+ }
100
+ </script>
101
+
102
+ <style scoped>
103
+ .card {
104
+ position: relative;
105
+ }
106
+ .details {
107
+ text-align: left;
108
+ }
109
+
110
+ .title {
111
+ overflow-x: hidden;
112
+ text-overflow: ellipsis;
113
+ white-space: nowrap;
114
+ }
115
+
116
+ p.bold {
117
+ font-weight: bold;
118
+ }
119
+
120
+ .image-overlay {
121
+ position: absolute;
122
+ top: 0;
123
+ right: 0;
124
+ }
125
+
126
+ .triangle-icon {
127
+ position: absolute;
128
+ }
129
+
130
+ .triangle-right-corner {
131
+ width: 0;
132
+ height: 0;
133
+ border-left: solid transparent;
134
+ border-top: solid #8300bf;
135
+ }
136
+ </style>