@burh/nuxt-core 1.0.418 → 1.0.421

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.
@@ -1,57 +1,145 @@
1
1
  <template>
2
- <div class="card h-100">
3
- <div class="container-fluid container-fluid--bu pt-5">
4
- <div class="">
5
- <h4 class="card-title font-weight-bold">{{ title }}</h4>
6
- </div>
2
+ <div class="card h-100">
3
+ <div class="pt-4 pl-4 pr-4">
4
+ <h4 class="card-title font-weight-bold mb-0">{{ title }}</h4>
5
+ </div>
6
+ <div class="container-fluid container-fluid--bu pt-2 pb-2 container--height">
7
+ <div class="card__content">
8
+ <div class="chart__graph" v-if="hasChart">
9
+ <doughnut-chart :data="chartData" />
10
+ </div>
7
11
 
8
- <div class="row card-body px-0">
9
- <div
10
- class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
11
- v-for="items in coursesInfo"
12
- :key="items.name"
13
- >
14
- <img
15
- v-if="items.icon"
16
- :src="items.icon"
17
- style="width: 5rem"
18
- />
19
- <span
20
- v-if="items.number"
21
- :class="items.color ? items.color : ''"
22
- class="display-1 font-weight-bold"
23
- >{{ items.number }}</span
24
- >
25
- <p
26
- v-if="items.name"
27
- :class="items.color ? items.color : ''"
28
- >
29
- {{ items.name }}
30
- </p>
31
- </div>
32
- </div>
33
- </div>
34
- </div>
12
+ <div class="row card-body px-0 justify-content-center">
13
+ <div
14
+ class="text-center px-0"
15
+ :class="!items.icon ? 'col-6 col-sm-3 col-md-3' : 'col-12'"
16
+ v-for="(items, index) in coursesInfo"
17
+ :key="items.name"
18
+ >
19
+ <div :class="{ 'item__with__icon': items.icon }">
20
+ <img
21
+ v-if="items.icon"
22
+ :src="items.icon"
23
+ style="width: 5rem"
24
+ />
25
+ <div>
26
+ <span
27
+ v-if="items.number"
28
+ :class="items.color ? items.color : ''"
29
+ class="display-1 font-weight-bold"
30
+ >{{ items.number }}</span
31
+ >
32
+ <p
33
+ v-if="items.name"
34
+ :class="[
35
+ items.color ? items.color : '',
36
+ hasChart && 'chart-label',
37
+ hasChart && `chart-color-${index}`
38
+ ]"
39
+ >
40
+ {{ items.name }}
41
+ </p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
35
49
  </template>
36
50
  <script>
37
- import CardSkeleton from '../Skeleton/Cards.vue';
51
+ import DoughnutChart from '../Chart/DoughnutChart.vue';
52
+
38
53
  export default {
39
- components: {
40
- CardSkeleton
41
- },
42
- data() {
43
- return {};
44
- },
45
- props: {
46
- title: {
47
- type: String,
48
- default: 'Resumo geral'
49
- },
50
- coursesInfo: Array
51
- }
54
+ components: {
55
+ DoughnutChart
56
+ },
57
+ props: {
58
+ title: {
59
+ type: String,
60
+ default: 'Resumo geral'
61
+ },
62
+ hasChart: {
63
+ type: Boolean,
64
+ default: false
65
+ },
66
+ coursesInfo: Array,
67
+ },
68
+ data() {
69
+ return {
70
+ chartData: {
71
+ labels: this.coursesInfo.map(item => item.name),
72
+ datasets: [
73
+ {
74
+ label: 'Dataset 1',
75
+ data: this.coursesInfo.map(item => item.number),
76
+ backgroundColor: ['#5865F2', '#9D35FC', '#FF539D', '#FF7D7E', '#FFCF02', '#00b388']
77
+ },
78
+ ]
79
+ },
80
+ };
81
+ },
52
82
  };
53
83
  </script>
54
84
  <style lang="scss" scoped>
85
+ .chart-label {
86
+ position: relative;
87
+ &::before {
88
+ content: '';
89
+ width: 20px;
90
+ height: 20px;
91
+ display: block;
92
+ position: absolute;
93
+ bottom: -30px;
94
+ left: 50%;
95
+ transform: translateX(-50%);
96
+ border-radius: 100%;
97
+ background: #5865F2;
98
+ }
99
+
100
+ $colors: (#5865F2, #9D35FC, #FF539D, #FF7D7E, #FFCF02, #00b388);
101
+
102
+ @each $color in $colors {
103
+ $i: index($colors, $color);
104
+
105
+ @debug $i;
106
+
107
+ &.chart-color-#{$i - 1} {
108
+ &::before {
109
+ background: $color!important;
110
+ }
111
+ }
112
+ }
113
+ }
114
+
115
+ .chart__graph {
116
+ width: 40%;
117
+ margin: 0 auto;
118
+ }
119
+
120
+ .item__with__icon {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ margin-top: 30px;
125
+ img {
126
+ margin-right: 60px;
127
+ }
128
+ }
129
+
130
+ .container--height {
131
+ height: 100%;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ flex-direction: column;
136
+
137
+ }
138
+
139
+ .card__content {
140
+ width: 100%;
141
+ }
142
+
55
143
  .card-title {
56
144
  font-size: 1rem;
57
145
  }
@@ -0,0 +1,20 @@
1
+ <script>
2
+ import { Doughnut } from 'vue-chartjs';
3
+
4
+ export default {
5
+ extends: Doughnut,
6
+ props: ['data'],
7
+ data() {
8
+ return {
9
+ options: {
10
+ legend: {
11
+ display: false
12
+ }
13
+ }
14
+ };
15
+ },
16
+ mounted() {
17
+ this.renderChart(this.data, this.options);
18
+ }
19
+ };
20
+ </script>
@@ -1,71 +1,116 @@
1
- <template>
2
- <div class="card h-100">
3
- <div class="container-fluid container-fluid--bu pt-5">
4
- <skeleton-animate :width="220" :height="20" rounded />
5
-
6
- <div class="row card-body px-0">
7
- <div
8
- class="col-6 col-sm-3 col-md-3 info-box text-center px-0"
9
- v-for="index in 3"
10
- :key="index"
11
- >
12
- <skeleton-animate
13
- :width="80"
14
- :height="80"
15
- class="ml-3"
16
- rounded
17
- />
18
-
19
- <skeleton-animate
20
- :width="120"
21
- :height="15"
22
- rounded
23
- class="mt-2"
24
- />
25
- </div>
26
- </div>
27
- <div class="d-flex align-items-center justify-content-center" v-if="hasExtra">
28
- <skeleton-animate :width="80" :height="80" img />
29
- <skeleton-animate
30
- :width="120"
31
- :height="15"
32
- rounded
33
- class="ml-2"
34
- />
35
- </div>
36
- </div>
37
- </div>
38
- </template>
39
- <script>
40
- import SkeletonAnimate from './SkeletonAnimate.vue';
41
- export default {
42
- name: 'course-info-skeleton',
43
- components: { SkeletonAnimate },
44
- props: {
45
- hasExtra: {
46
- type: Boolean,
47
- default: false
48
- }
49
- }
50
- };
51
- </script>
52
-
53
- <style lang="scss" scoped>
54
- .card-title {
55
- font-size: 1rem;
56
- }
57
- .info-box {
58
- @media (min-width: 576px) {
59
- flex: 0 0 50%;
60
- max-width: 50%;
61
- }
62
- @media (min-width: 768px) {
63
- flex: 0 0 50%;
64
- max-width: 50%;
65
- }
66
- @media (min-width: 1024px) {
67
- flex: 0 0 33%;
68
- max-width: 33%;
69
- }
70
- }
71
- </style>
1
+ <template>
2
+ <div class="card h-100">
3
+ <div class="pt-4 pl-4 pr-4">
4
+ <skeleton-animate :width="220" :height="20" rounded />
5
+ </div>
6
+ <div class="container-fluid container-fluid--bu pt-2 pb-2 container--height">
7
+ <div class="card__content">
8
+ <div class="chart__graph" v-if="hasChart">
9
+ <skeleton-animate
10
+ :width="300"
11
+ :height="300"
12
+ img
13
+ />
14
+ </div>
15
+
16
+ <div class="row card-body px-0 justify-content-center">
17
+ <div
18
+ class="text-center px-0"
19
+ :class="hasIcon && index === 3 ? 'col-12' : 'col-6 col-sm-3 col-md-3'"
20
+ v-for="index in 3"
21
+ :key="index"
22
+ >
23
+ <div :class="{ 'item__with__icon': index === 3 && hasIcon }">
24
+ <div style="margin-left: -50px;" v-if="index === 3 && hasIcon">
25
+ <skeleton-animate
26
+ :width="150"
27
+ :height="100"
28
+ class="mr-4"
29
+ rounded
30
+ />
31
+ </div>
32
+ <div>
33
+ <skeleton-animate
34
+ :width="80"
35
+ :height="80"
36
+ class="ml-3"
37
+ rounded
38
+ />
39
+
40
+ <skeleton-animate
41
+ :width="120"
42
+ :height="15"
43
+ rounded
44
+ class="mt-2"
45
+ />
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </template>
54
+ <script>
55
+ import SkeletonAnimate from './SkeletonAnimate.vue';
56
+ export default {
57
+ name: 'course-info-skeleton',
58
+ components: { SkeletonAnimate },
59
+ props: {
60
+ hasIcon: {
61
+ type: Boolean,
62
+ default: false
63
+ },
64
+ hasChart: {
65
+ type: Boolean,
66
+ default: false
67
+ },
68
+ }
69
+ };
70
+ </script>
71
+
72
+ <style lang="scss" scoped>
73
+ .chart__graph {
74
+ width: 60%;
75
+ margin: 0 auto;
76
+ padding: 20px;
77
+ }
78
+
79
+ .item__with__icon {
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ margin-top: 80px;
84
+ }
85
+
86
+ .container--height {
87
+ height: 100%;
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ flex-direction: column;
92
+
93
+ }
94
+
95
+ .card__content {
96
+ width: 100%;
97
+ }
98
+
99
+ .card-title {
100
+ font-size: 1rem;
101
+ }
102
+ .info-box {
103
+ @media (min-width: 576px) {
104
+ flex: 0 0 50%;
105
+ max-width: 50%;
106
+ }
107
+ @media (min-width: 768px) {
108
+ flex: 0 0 50%;
109
+ max-width: 50%;
110
+ }
111
+ @media (min-width: 1024px) {
112
+ flex: 0 0 33%;
113
+ max-width: 33%;
114
+ }
115
+ }
116
+ </style>
package/package.json CHANGED
@@ -1,114 +1,114 @@
1
1
  {
2
- "name": "@burh/nuxt-core",
3
- "version": "1.0.418",
4
- "description": "Design System and Components.",
5
- "author": "Burh",
6
- "scripts": {
7
- "dev": "nuxt",
8
- "build": "nuxt build",
9
- "start": "nuxt start",
10
- "generate": "nuxt generate",
11
- "build:server": "git pull origin release && yarn install && yarn build && pm2 restart all",
12
- "start:maintenance": "MAINTENANCE_MODE=true pm2 restart all",
13
- "dev:maintenance": "MAINTENANCE_MODE=true nuxt"
14
- },
15
- "dependencies": {
16
- "@babel/core": "^7.4.5",
17
- "@blowstack/ckeditor-nuxt": "^0.6.0",
18
- "@chenfengyuan/vue-qrcode": "^1.0.1",
19
- "@ckeditor/ckeditor5-build-classic": "^27.0.0",
20
- "@fortawesome/fontawesome-svg-core": "^1.2.22",
21
- "@fortawesome/free-brands-svg-icons": "^5.10.2",
22
- "@fortawesome/free-regular-svg-icons": "^5.10.2",
23
- "@fortawesome/free-solid-svg-icons": "^5.10.2",
24
- "@fortawesome/vue-fontawesome": "^0.1.7",
25
- "@fullcalendar/core": "^4.2.0",
26
- "@fullcalendar/daygrid": "^4.1.0",
27
- "@fullcalendar/interaction": "^4.1.0",
28
- "@fullcalendar/timegrid": "^4.1.0",
29
- "@fullcalendar/vue": "^4.2.2",
30
- "@nuxtjs/axios": "^5.3.6",
31
- "@nuxtjs/google-adsense": "^1.1.3",
32
- "@nuxtjs/google-tag-manager": "^2.3.1",
33
- "@nuxtjs/pwa": "^3.0.0-beta.16",
34
- "bootstrap": "4.3.1",
35
- "chart.js": "^2.8.0",
36
- "d3": "^5.9.2",
37
- "datamaps": "^0.5.9",
38
- "date-fns": "^1.30.1",
39
- "dropzone": "^5.5.1",
40
- "element-ui": "2.13.0",
41
- "es6-promise": "^4.2.6",
42
- "file-loader": "^6.0.0",
43
- "flag-icon-css": "^3.4.5",
44
- "flatpickr": "^4.5.7",
45
- "fuse.js": "^3.4.5",
46
- "google-maps": "^3.3.0",
47
- "heic2any": "0.0.2",
48
- "hls.js": "^1.0.10",
49
- "local-web-server": "^3.0.7",
50
- "mobile-device-detect": "^0.3.3",
51
- "moment": "^2.24.0",
52
- "nouislider": "^13.1.5",
53
- "nuxt": "^2.8.1",
54
- "nuxt-fontawesome": "^0.4.0",
55
- "nuxt-google-maps-module": "^1.6.0",
56
- "nuxt-maintenance-mode": "^0.3.0",
57
- "nuxt-sass-resources-loader": "^2.0.5",
58
- "nuxt-validate": "^1.0.1",
59
- "nuxt-vuex-localstorage": "^1.2.6",
60
- "passport-linkedin": "^1.0.0",
61
- "perfect-scrollbar": "^1.4.0",
62
- "prismjs": "^1.17.1",
63
- "quill": "^1.3.6",
64
- "quill-image-resize-module": "^3.0.0",
65
- "read-env": "^1.3.0",
66
- "remove-accents": "^0.4.2",
67
- "sticky-js": "^1.2.0",
68
- "sweetalert2": "^8.11.6",
69
- "v-click-outside": "^3.1.2",
70
- "v-owl-carousel": "^1.0.8",
71
- "v-resize": "^0.1.1",
72
- "vee-validate": "^2.2.8",
73
- "vue": "^2.6.10",
74
- "vue-chartjs": "^3.4.2",
75
- "vue-clipboard2": "^0.3.0",
76
- "vue-croppie": "^2.0.1",
77
- "vue-flatpickr-component": "^8.1.2",
78
- "vue-form-generator": "^2.3.4",
79
- "vue-loading-overlay": "^3.3.2",
80
- "vue-nav-tabs": "^0.5.7",
81
- "vue-plain-pagination": "^0.3.0",
82
- "vue-slick-carousel": "^1.0.6",
83
- "vue-the-mask": "^0.11.1",
84
- "vue2-transitions": "^0.3.0",
85
- "webp-loader": "^0.6.0"
86
- },
87
- "devDependencies": {
88
- "autoprefixer": "^9.6.1",
89
- "babel-eslint": "^10.0.3",
90
- "babel-plugin-component": "^1.1.0",
91
- "browser-sync": "^2.26.7",
92
- "cross-env": "^5.2.0",
93
- "cssnano": "^4.1.10",
94
- "del": "^5.0.0",
95
- "eslint": "^6.8.0",
96
- "eslint-plugin-vue": "^6.1.2",
97
- "img-loader": "^3.0.1",
98
- "lodash": "^4.17.15",
99
- "node-dir": "^0.1.17",
100
- "node-sass": "^5.0.0",
101
- "nodemon": "^1.18.9",
102
- "sass-loader": "^7.1.0"
103
- },
104
- "main": "dictionary.js",
105
- "repository": {
106
- "type": "git",
107
- "url": "git+ssh://git@gitlab.com/gabrielesnack/burh-core.git"
108
- },
109
- "license": "UNLICENSED",
110
- "bugs": {
111
- "url": "https://gitlab.com/gabrielesnack/burh-core/issues"
112
- },
113
- "homepage": "https://gitlab.com/gabrielesnack/burh-core#readme"
2
+ "name": "@burh/nuxt-core",
3
+ "version": "1.0.421",
4
+ "description": "Design System and Components.",
5
+ "author": "Burh",
6
+ "scripts": {
7
+ "dev": "nuxt",
8
+ "build": "nuxt build",
9
+ "start": "nuxt start",
10
+ "generate": "nuxt generate",
11
+ "build:server": "git pull origin release && yarn install && yarn build && pm2 restart all",
12
+ "start:maintenance": "MAINTENANCE_MODE=true pm2 restart all",
13
+ "dev:maintenance": "MAINTENANCE_MODE=true nuxt"
14
+ },
15
+ "dependencies": {
16
+ "@babel/core": "^7.4.5",
17
+ "@blowstack/ckeditor-nuxt": "^0.6.0",
18
+ "@chenfengyuan/vue-qrcode": "^1.0.1",
19
+ "@ckeditor/ckeditor5-build-classic": "^27.0.0",
20
+ "@fortawesome/fontawesome-svg-core": "^1.2.22",
21
+ "@fortawesome/free-brands-svg-icons": "^5.10.2",
22
+ "@fortawesome/free-regular-svg-icons": "^5.10.2",
23
+ "@fortawesome/free-solid-svg-icons": "^5.10.2",
24
+ "@fortawesome/vue-fontawesome": "^0.1.7",
25
+ "@fullcalendar/core": "^4.2.0",
26
+ "@fullcalendar/daygrid": "^4.1.0",
27
+ "@fullcalendar/interaction": "^4.1.0",
28
+ "@fullcalendar/timegrid": "^4.1.0",
29
+ "@fullcalendar/vue": "^4.2.2",
30
+ "@nuxtjs/axios": "^5.3.6",
31
+ "@nuxtjs/google-adsense": "^1.1.3",
32
+ "@nuxtjs/google-tag-manager": "^2.3.1",
33
+ "@nuxtjs/pwa": "^3.0.0-beta.16",
34
+ "bootstrap": "4.3.1",
35
+ "chart.js": "2.9.4",
36
+ "d3": "^5.9.2",
37
+ "datamaps": "^0.5.9",
38
+ "date-fns": "^1.30.1",
39
+ "dropzone": "^5.5.1",
40
+ "element-ui": "2.13.0",
41
+ "es6-promise": "^4.2.6",
42
+ "file-loader": "^6.0.0",
43
+ "flag-icon-css": "^3.4.5",
44
+ "flatpickr": "^4.5.7",
45
+ "fuse.js": "^3.4.5",
46
+ "google-maps": "^3.3.0",
47
+ "heic2any": "0.0.2",
48
+ "hls.js": "^1.0.10",
49
+ "local-web-server": "^3.0.7",
50
+ "mobile-device-detect": "^0.3.3",
51
+ "moment": "^2.24.0",
52
+ "nouislider": "^13.1.5",
53
+ "nuxt": "^2.8.1",
54
+ "nuxt-fontawesome": "^0.4.0",
55
+ "nuxt-google-maps-module": "^1.6.0",
56
+ "nuxt-maintenance-mode": "^0.3.0",
57
+ "nuxt-sass-resources-loader": "^2.0.5",
58
+ "nuxt-validate": "^1.0.1",
59
+ "nuxt-vuex-localstorage": "^1.2.6",
60
+ "passport-linkedin": "^1.0.0",
61
+ "perfect-scrollbar": "^1.4.0",
62
+ "prismjs": "^1.17.1",
63
+ "quill": "^1.3.6",
64
+ "quill-image-resize-module": "^3.0.0",
65
+ "read-env": "^1.3.0",
66
+ "remove-accents": "^0.4.2",
67
+ "sticky-js": "^1.2.0",
68
+ "sweetalert2": "^8.11.6",
69
+ "v-click-outside": "^3.1.2",
70
+ "v-owl-carousel": "^1.0.8",
71
+ "v-resize": "^0.1.1",
72
+ "vee-validate": "^2.2.8",
73
+ "vue": "^2.6.10",
74
+ "vue-chartjs": "^3.5.1",
75
+ "vue-clipboard2": "^0.3.0",
76
+ "vue-croppie": "^2.0.1",
77
+ "vue-flatpickr-component": "^8.1.2",
78
+ "vue-form-generator": "^2.3.4",
79
+ "vue-loading-overlay": "^3.3.2",
80
+ "vue-nav-tabs": "^0.5.7",
81
+ "vue-plain-pagination": "^0.3.0",
82
+ "vue-slick-carousel": "^1.0.6",
83
+ "vue-the-mask": "^0.11.1",
84
+ "vue2-transitions": "^0.3.0",
85
+ "webp-loader": "^0.6.0"
86
+ },
87
+ "devDependencies": {
88
+ "autoprefixer": "^9.6.1",
89
+ "babel-eslint": "^10.0.3",
90
+ "babel-plugin-component": "^1.1.0",
91
+ "browser-sync": "^2.26.7",
92
+ "cross-env": "^5.2.0",
93
+ "cssnano": "^4.1.10",
94
+ "del": "^5.0.0",
95
+ "eslint": "^6.8.0",
96
+ "eslint-plugin-vue": "^6.1.2",
97
+ "img-loader": "^3.0.1",
98
+ "lodash": "^4.17.15",
99
+ "node-dir": "^0.1.17",
100
+ "node-sass": "^5.0.0",
101
+ "nodemon": "^1.18.9",
102
+ "sass-loader": "^7.1.0"
103
+ },
104
+ "main": "dictionary.js",
105
+ "repository": {
106
+ "type": "git",
107
+ "url": "git+ssh://git@gitlab.com/gabrielesnack/burh-core.git"
108
+ },
109
+ "license": "UNLICENSED",
110
+ "bugs": {
111
+ "url": "https://gitlab.com/gabrielesnack/burh-core/issues"
112
+ },
113
+ "homepage": "https://gitlab.com/gabrielesnack/burh-core#readme"
114
114
  }