@iamproperty/components 2.7.4 → 2.7.7
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.
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/email.min.css +1 -0
- package/assets/css/email.min.css.map +1 -0
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/modules/chart.js +217 -0
- package/assets/js/modules/helpers.js +18 -14
- package/assets/js/modules/table.js +89 -89
- package/assets/js/scripts.bundle.js +49 -55
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/sass/_functions/variables.scss +3 -1
- package/assets/sass/components/nav.scss +10 -5
- package/assets/sass/elements/lists.scss +23 -0
- package/assets/sass/foundations/icons.scss +3 -2
- package/assets/svg/icons.svg +483 -0
- package/dist/components.common.js +361 -632
- package/dist/components.common.js.map +1 -1
- package/dist/components.css +2 -2
- package/dist/components.css.map +1 -1
- package/dist/components.umd.js +361 -631
- package/dist/components.umd.js.map +1 -1
- package/dist/components.umd.min.js +1 -1
- package/dist/components.umd.min.js.map +1 -1
- package/dist/demo.html +1 -10
- package/package.json +23 -17
- package/src/components/Chart/Chart.vue +8 -165
- package/src/foundations/Icon/Icon.vue +6 -1
- package/src/foundations/Logo/Logo.vue +1 -1
package/dist/demo.html
CHANGED
|
@@ -1,10 +1 @@
|
|
|
1
|
-
|
|
2
|
-
<title>components demo</title>
|
|
3
|
-
<script src="./components.umd.js"></script>
|
|
4
|
-
|
|
5
|
-
<link rel="stylesheet" href="./components.css">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
console.log(components)
|
|
10
|
-
</script>
|
|
1
|
+
<!doctype html><meta charset="utf-8"><title>components demo</title><script src="./components.umd.js"></script><link rel="stylesheet" href="./components.css"><script>console.log(components)</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iamproperty/components",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Component library for iamproperty",
|
|
6
6
|
"author": {
|
|
@@ -11,19 +11,20 @@
|
|
|
11
11
|
"build": "vue-cli-service build --target lib src/index.js",
|
|
12
12
|
"lint": "vue-cli-service lint",
|
|
13
13
|
"audit": "node local_modules/audit.js",
|
|
14
|
-
"build:docs": "vue-cli-service build docs/main.js",
|
|
14
|
+
"build:docs": "npm run copy:svg && vue-cli-service build docs/main.js",
|
|
15
15
|
"compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
|
|
16
16
|
"compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
|
|
17
17
|
"compile:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
|
|
18
18
|
"compile:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
|
|
19
|
-
"dev": "npm run serve",
|
|
19
|
+
"dev": "npm run copy:svg && npm run serve",
|
|
20
20
|
"prepack": "npm run build",
|
|
21
21
|
"pull-request": "npm run test:unit && npm run test:scss && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit",
|
|
22
22
|
"test": "npm run test:unit && npm run test:scss && npm run test:visual",
|
|
23
23
|
"test:scss": "mocha tests/_sass.mjs",
|
|
24
24
|
"test:unit": "vue-cli-service test:unit",
|
|
25
25
|
"test:approve": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles --updateSnapshot",
|
|
26
|
-
"test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles"
|
|
26
|
+
"test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles",
|
|
27
|
+
"copy:svg": "copyfiles -u 2 assets/svg/* public/svg && copyfiles -u 2 assets/svg/**/* public/svg"
|
|
27
28
|
},
|
|
28
29
|
"main": "dist/components.umd.js",
|
|
29
30
|
"files": [
|
|
@@ -34,7 +35,9 @@
|
|
|
34
35
|
"dependencies": {
|
|
35
36
|
"@babel/plugin-transform-runtime": "^7.16.7",
|
|
36
37
|
"@vue/eslint-config-standard": "^6.1.0",
|
|
38
|
+
"@vue/vue2-jest": "^27.0.0",
|
|
37
39
|
"bootstrap": "^5.1.3",
|
|
40
|
+
"cache-loader": "^4.1.0",
|
|
38
41
|
"glob": "^7.2.0",
|
|
39
42
|
"mocha": "^9.2.0",
|
|
40
43
|
"sass": "^1.45.1",
|
|
@@ -48,7 +51,7 @@
|
|
|
48
51
|
"@babel/cli": "^7.16.0",
|
|
49
52
|
"@babel/core": "^7.16.5",
|
|
50
53
|
"@babel/eslint-parser": "^7.16.5",
|
|
51
|
-
"@babel/preset-env": "^7.
|
|
54
|
+
"@babel/preset-env": "^7.17.10",
|
|
52
55
|
"@fullhuman/postcss-purgecss": "^4.1.3",
|
|
53
56
|
"@popperjs/core": "^2.11.0",
|
|
54
57
|
"@rollup/plugin-babel": "^5.3.0",
|
|
@@ -56,12 +59,13 @@
|
|
|
56
59
|
"@rollup/plugin-node-resolve": "^13.1.1",
|
|
57
60
|
"@rollup/plugin-replace": "^2.4.2",
|
|
58
61
|
"@vue/cli-plugin-babel": "^3.12.1",
|
|
59
|
-
"@vue/cli-plugin-eslint": "^
|
|
60
|
-
"@vue/cli-plugin-router": "^
|
|
61
|
-
"@vue/cli-plugin-unit-jest": "^
|
|
62
|
-
"@vue/cli-service": "^
|
|
62
|
+
"@vue/cli-plugin-eslint": "^5.0.4",
|
|
63
|
+
"@vue/cli-plugin-router": "^5.0.4",
|
|
64
|
+
"@vue/cli-plugin-unit-jest": "^5.0.4",
|
|
65
|
+
"@vue/cli-service": "^5.0.4",
|
|
63
66
|
"@vue/test-utils": "^1.3.0",
|
|
64
|
-
"
|
|
67
|
+
"babel-core": "^7.0.0-bridge.0",
|
|
68
|
+
"copyfiles": "^2.4.1",
|
|
65
69
|
"cross-env": "^7.0.3",
|
|
66
70
|
"eslint": "^7.32.0",
|
|
67
71
|
"eslint-plugin-import": "^2.25.3",
|
|
@@ -69,23 +73,25 @@
|
|
|
69
73
|
"eslint-plugin-promise": "^5.2.0",
|
|
70
74
|
"eslint-plugin-standard": "^4.1.0",
|
|
71
75
|
"eslint-plugin-vue": "^7.20.0",
|
|
76
|
+
"file-loader": "^6.2.0",
|
|
72
77
|
"html-loader": "^2.1.2",
|
|
73
|
-
"jest-environment-puppeteer": "^
|
|
78
|
+
"jest-environment-puppeteer": "^6.0.3",
|
|
74
79
|
"jest-image-snapshot": "^4.5.1",
|
|
75
|
-
"jest-puppeteer": "^
|
|
76
|
-
"jest-puppeteer-preset": "^
|
|
77
|
-
"markdown-loader": "^
|
|
80
|
+
"jest-puppeteer": "^6.1.0",
|
|
81
|
+
"jest-puppeteer-preset": "^6.1.0",
|
|
82
|
+
"markdown-loader": "^8.0.0",
|
|
78
83
|
"postcss": "^8.4.7",
|
|
79
84
|
"postcss-css-variables": "^0.18.0",
|
|
80
|
-
"puppeteer": "^
|
|
85
|
+
"puppeteer": "^13.7.0",
|
|
81
86
|
"rollup": "^2.62.0",
|
|
82
87
|
"rollup-plugin-istanbul": "^3.0.0",
|
|
83
88
|
"sass-true": "^6.0.1",
|
|
84
89
|
"serve": "^13.0.2",
|
|
85
90
|
"terser": "5.1.0",
|
|
86
|
-
"vue-
|
|
91
|
+
"vue-jest": "^3.0.7",
|
|
92
|
+
"vue-svg-loader": "^0.16.0",
|
|
87
93
|
"vue-template-compiler": "^2.6.14",
|
|
88
|
-
"webpack": "^
|
|
94
|
+
"webpack": "^5.72.0"
|
|
89
95
|
},
|
|
90
96
|
"license": "UNLICENSED",
|
|
91
97
|
"localURL": "http://localhost:8080",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="container" ref="wrapper">
|
|
3
3
|
<slot></slot>
|
|
4
|
-
<figure class="chart__wrapper">
|
|
4
|
+
<figure class="chart__wrapper" ref="chartWrapper">
|
|
5
5
|
<figcaption v-html="caption"></figcaption>
|
|
6
6
|
<div :class="`chart__key chart__key--${type} h5`" role="presentation">
|
|
7
7
|
<div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
<div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
|
-
<span
|
|
23
|
+
<span class="lines" v-if="type == 'line'"></span>
|
|
24
24
|
</Table>
|
|
25
|
-
<div
|
|
25
|
+
<div class="pies" v-if="type == 'pie'"></div>
|
|
26
26
|
</div>
|
|
27
27
|
</figure>
|
|
28
28
|
</div>
|
|
@@ -35,9 +35,10 @@
|
|
|
35
35
|
<script>
|
|
36
36
|
import { ucfirst, unsnake } from '../../helpers/strings'
|
|
37
37
|
import Table from '@/elements/Table/Table.vue'
|
|
38
|
+
import chartModule from '../../../assets/js/modules/chart.js'
|
|
38
39
|
|
|
39
40
|
export default {
|
|
40
|
-
name: '
|
|
41
|
+
name: 'Chart',
|
|
41
42
|
components: {
|
|
42
43
|
Table
|
|
43
44
|
},
|
|
@@ -73,172 +74,14 @@ export default {
|
|
|
73
74
|
required: true
|
|
74
75
|
}
|
|
75
76
|
},
|
|
76
|
-
computed: {
|
|
77
|
-
drawLines (){
|
|
78
|
-
return () => {
|
|
79
|
-
|
|
80
|
-
let lines = Array();
|
|
81
|
-
let spacer = 200/(Object.keys(this.items).length - 1);
|
|
82
|
-
const max = this.max - this.min;
|
|
83
|
-
|
|
84
|
-
// Creates the lines array from the fields array
|
|
85
|
-
this.fields.forEach((field, index) => {
|
|
86
|
-
|
|
87
|
-
if(index != 0){
|
|
88
|
-
|
|
89
|
-
lines[index-1] = '';
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
// populate the lines array from the items array
|
|
94
|
-
this.items.forEach((item, index) => {
|
|
95
|
-
|
|
96
|
-
Object.keys(item).forEach((key, subindex) => {
|
|
97
|
-
|
|
98
|
-
if(subindex != 0){
|
|
99
|
-
|
|
100
|
-
let value = item[key]
|
|
101
|
-
|
|
102
|
-
value = value.replace('£','');
|
|
103
|
-
value = value.replace('%','');
|
|
104
|
-
value = Number.parseFloat(value) - this.min;
|
|
105
|
-
|
|
106
|
-
const percent = (value/max) * 100;
|
|
107
|
-
let command = index == 0 ? 'M' : 'L';
|
|
108
|
-
|
|
109
|
-
lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
// Create the line strings
|
|
115
|
-
let returnString = '';
|
|
116
|
-
|
|
117
|
-
lines.forEach((line, index) => {
|
|
118
|
-
|
|
119
|
-
returnString += `
|
|
120
|
-
<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
|
|
121
|
-
<path fill="none" d="${line}"></path>
|
|
122
|
-
</svg>`
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
return returnString;
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
drawPie (){
|
|
129
|
-
return () => {
|
|
130
|
-
|
|
131
|
-
let returnString = '';
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
this.items.forEach((item, index) => {
|
|
135
|
-
|
|
136
|
-
let paths = '';
|
|
137
|
-
let tooltips = '';
|
|
138
|
-
|
|
139
|
-
let cumulativePercent = 0;
|
|
140
|
-
|
|
141
|
-
function getCoordinatesForPercent(percent) {
|
|
142
|
-
const x = Math.cos(2 * Math.PI * percent);
|
|
143
|
-
const y = Math.sin(2 * Math.PI * percent);
|
|
144
|
-
return [x*100, y*100];
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
let total = 0;
|
|
148
|
-
|
|
149
|
-
let titleKey = Object.keys(item)[0]
|
|
150
|
-
let title = item[titleKey]
|
|
151
|
-
|
|
152
|
-
Object.keys(item).forEach((key, subindex) => {
|
|
153
|
-
|
|
154
|
-
if(subindex != 0){
|
|
155
|
-
let value = item[key]
|
|
156
|
-
|
|
157
|
-
value = value.replace('£','');
|
|
158
|
-
value = value.replace('%','');
|
|
159
|
-
value = Number.parseInt(value);
|
|
160
|
-
|
|
161
|
-
total += value;
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
Object.keys(item).forEach((key, subindex) => {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
if(subindex != 0){
|
|
169
|
-
|
|
170
|
-
let value = item[key]
|
|
171
|
-
|
|
172
|
-
value = value.replace('£','');
|
|
173
|
-
value = value.replace('%','');
|
|
174
|
-
value = Number.parseInt(value);
|
|
175
|
-
|
|
176
|
-
let percent = value/total;
|
|
177
|
-
|
|
178
|
-
//lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
|
|
179
|
-
const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
|
|
180
|
-
|
|
181
|
-
// each slice starts where the last slice ended, so keep a cumulative percent
|
|
182
|
-
cumulativePercent += percent;
|
|
183
|
-
|
|
184
|
-
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
|
|
185
|
-
|
|
186
|
-
// if the slice is more than 50%, take the large arc (the long way around)
|
|
187
|
-
const largeArcFlag = percent > .5 ? 1 : 0;
|
|
188
|
-
|
|
189
|
-
// create an array and join it just for code readability
|
|
190
|
-
const pathData = [
|
|
191
|
-
`M ${startX} ${startY}`, // Move
|
|
192
|
-
`A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
|
|
193
|
-
`L 0 0`, // Line
|
|
194
|
-
].join(' ');
|
|
195
|
-
|
|
196
|
-
paths += `<path d="${pathData}"></path>`;
|
|
197
|
-
tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${ucfirst(unsnake(title))}<br/> ${ucfirst(unsnake(key))}<br/> ${item[key]}</span></div></foreignObject>`;
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
|
|
202
|
-
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
return returnString;
|
|
207
|
-
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
77
|
mounted(){
|
|
212
78
|
this.$nextTick(function () {
|
|
213
79
|
|
|
214
80
|
// If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
|
|
215
|
-
|
|
216
|
-
const max = this.max -
|
|
217
|
-
|
|
218
|
-
Array.from(chart.querySelectorAll('tbody tr')).forEach((tr, index) => {
|
|
219
|
-
|
|
220
|
-
let group = tr.querySelector('td:first-child').innerHTML;
|
|
221
|
-
|
|
222
|
-
Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
|
|
223
|
-
|
|
224
|
-
const value = Number.parseFloat(td.getAttribute('data-numeric'));
|
|
225
|
-
let percent = ((value - this.min)/(max)) * 100;
|
|
226
|
-
const content = td.innerHTML;
|
|
227
|
-
const label = td.getAttribute('data-label');
|
|
228
|
-
let bottom = 0;
|
|
229
|
-
|
|
230
|
-
// If the value is negative the position below the 0 line
|
|
231
|
-
if(this.min < 0){
|
|
232
|
-
bottom = Math.abs((this.min)/(max)*100);
|
|
233
|
-
if(value < 0){
|
|
234
|
-
bottom = bottom - percent;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
|
|
81
|
+
const min = this.min;
|
|
82
|
+
const max = this.max - min;
|
|
238
83
|
|
|
239
|
-
|
|
240
|
-
});
|
|
241
|
-
});
|
|
84
|
+
chartModule(this.$refs.chartWrapper, min, max, this.type);
|
|
242
85
|
})
|
|
243
86
|
}
|
|
244
87
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<svg class="icon">
|
|
3
3
|
<title>{{id}}</title>
|
|
4
|
-
<use :xlink:href="'#icon-'+id"></use>
|
|
4
|
+
<use :xlink:href="path+'#icon-'+id"></use>
|
|
5
5
|
</svg>
|
|
6
6
|
</template>
|
|
7
7
|
|
|
@@ -13,6 +13,11 @@ export default {
|
|
|
13
13
|
type: String,
|
|
14
14
|
required: false,
|
|
15
15
|
default: 'email'
|
|
16
|
+
},
|
|
17
|
+
path: {
|
|
18
|
+
type: String,
|
|
19
|
+
required: false,
|
|
20
|
+
default: '/svg/icons.svg'
|
|
16
21
|
}
|
|
17
22
|
}
|
|
18
23
|
}
|