@golstats/gsc-reports 1.0.87 → 1.0.89

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@golstats/gsc-reports",
3
- "version": "1.0.87",
3
+ "version": "1.0.89",
4
4
  "main": "dist/gsc-reports.umd.js",
5
5
  "module": "dist/gsc-reports.es.js",
6
6
  "exports": {
@@ -47,7 +47,7 @@
47
47
  },
48
48
  "dependencies": {
49
49
  "@golstats/gsc-checkbox": "^1.0.13",
50
- "@golstats/gsc-template-report-maker": "^1.0.120",
50
+ "@golstats/gsc-template-report-maker": "^1.0.122",
51
51
  "axios": "^1.10.0",
52
52
  "gridstack": "^12.1.1",
53
53
  "tiny-emitter": "^2.1.0",
@@ -711,6 +711,8 @@ onBeforeUnmount(() => {
711
711
  color: #8b98a9;
712
712
  font-size: 20px;
713
713
  margin-top: 40px;
714
+ font-family: 'Poppins-Regular', sans-serif;
715
+ margin-bottom: 40px;
714
716
  }
715
717
 
716
718
  /* Estados de carga y error */
@@ -1,165 +1,165 @@
1
- <script setup>
2
- import { computed, ref, watch } from 'vue'
3
-
4
- const props = defineProps({
5
- isPostMatch: {
6
- type: Boolean,
7
- default: true
8
- },
9
- initialCoverId: {
10
- type: Number,
11
- default: 1
12
- }
13
- })
14
-
15
- const emit = defineEmits(['select-cover'])
16
-
17
- const demoCoversPostMatch = ref([
18
- {
19
- id: 1,
20
- src: '/reports/thumbnail-portada-01@2x.png',
21
- isSelected: true,
22
- isPostMatch: true
23
- },
24
- {
25
- id: 2,
26
- src: '/reports/thumbnail-portada-02@2x.png',
27
- isSelected: false,
28
- isPostMatch: true
29
- },
30
- {
31
- id: 3,
32
- src: '/reports/thumbnail-portada-03@2x.png',
33
- isSelected: false,
34
- isPostMatch: true
35
- },
36
- {
37
- id: 4,
38
- src: '/reports/thumbnail-portada-04@2x.png',
39
- isSelected: false,
40
- isPostMatch: true
41
- }
42
- ])
43
-
44
- const demoCoversPreMatch = ref([
45
- {
46
- id: 1,
47
- src: '/reports/thumbnail-portada-prmatch-01@2x.png',
48
- isSelected: true,
49
- isPostMatch: false
50
- },
51
- {
52
- id: 2,
53
- src: '/reports/thumbnail-portada-prmatch-02@2x.png',
54
- isSelected: false,
55
- isPostMatch: false
56
- },
57
- {
58
- id: 3,
59
- src: '/reports/thumbnail-portada-prmatch-03@2x.png',
60
- isSelected: false,
61
- isPostMatch: false
62
- },
63
- {
64
- id: 4,
65
- src: '/reports/thumbnail-portada-prmatch-04@2x.png',
66
- isSelected: false,
67
- isPostMatch: false
68
- }
69
- ])
70
-
71
- const availableCovers = computed(() => {
72
- return props.isPostMatch ? demoCoversPostMatch.value : demoCoversPreMatch.value
73
- })
74
-
75
- watch(() => availableCovers.value, (covers) => {
76
- const initialCover = covers.find(c => c.id === props.initialCoverId)
77
- if (initialCover) {
78
- onClickCover(initialCover)
79
- } else {
80
- // If the initial cover is not found, select the first one
81
- onClickCover(covers[0])
82
- }
83
- },
84
-
85
- { immediate: true })
86
-
87
- function onClickCover(cover) {
88
- availableCovers.value.forEach((c => c.isSelected = false))
89
- cover.isSelected = true
90
- emit('select-cover', cover)
91
- }
92
- </script>
93
-
94
- <template>
95
- <div class="cover-selector">
96
- <div class="cover-selector__text">
97
- Portada
98
- </div>
99
- <div class="cover-selector__covers">
100
- <div
101
- v-for="cover of availableCovers"
102
- :key="cover.id"
103
- class="cover-selector__covers__cover"
104
- :class="{ 'is-selected': cover.isSelected }"
105
- @click="onClickCover(cover)"
106
- >
107
- <img :src="cover.src" alt="Cover Image"/>
108
- </div>
109
- </div>
110
- </div>
111
- </template>
112
-
113
- <style scoped lang="scss">
114
- .cover-selector {
115
- display: flex;
116
- align-items: center;
117
- gap: 18px;
118
- padding: 10px 20px;
119
- border-radius: 5px;
120
- box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.25);
121
- background-color: #2a3843;
122
-
123
- &__text {
124
- font-family: Poppins-Medium, sans-serif;
125
- font-size: 16px;
126
- font-weight: 500;
127
- font-stretch: normal;
128
- font-style: normal;
129
- line-height: normal;
130
- letter-spacing: normal;
131
- text-align: left;
132
- color: #fff;
133
- }
134
-
135
- &__covers {
136
- display: flex;
137
- justify-content: center;
138
- align-items: center;
139
- gap: 8px;
140
-
141
- &__cover {
142
- height: 40px;
143
- width: auto;
144
- overflow: hidden;
145
- cursor: pointer;
146
- transition: transform 0.3s ease;
147
-
148
- &.is-selected {
149
- border: 1px solid #4289CC;
150
- border-radius: 4px;
151
- }
152
-
153
- &:hover {
154
- transform: scale(1.05);
155
- }
156
-
157
- img {
158
- width: 100%;
159
- height: 100%;
160
- object-fit: cover;
161
- }
162
- }
163
- }
164
- }
165
- </style>
1
+ <script setup>
2
+ import { computed, ref, watch } from 'vue'
3
+
4
+ const props = defineProps({
5
+ isPostMatch: {
6
+ type: Boolean,
7
+ default: true
8
+ },
9
+ initialCoverId: {
10
+ type: Number,
11
+ default: 1
12
+ }
13
+ })
14
+
15
+ const emit = defineEmits(['select-cover'])
16
+
17
+ const demoCoversPostMatch = ref([
18
+ {
19
+ id: 1,
20
+ src: '/reports/thumbnail-portada-01@2x.png',
21
+ isSelected: true,
22
+ isPostMatch: true
23
+ },
24
+ {
25
+ id: 2,
26
+ src: '/reports/thumbnail-portada-02@2x.png',
27
+ isSelected: false,
28
+ isPostMatch: true
29
+ },
30
+ {
31
+ id: 3,
32
+ src: '/reports/thumbnail-portada-03@2x.png',
33
+ isSelected: false,
34
+ isPostMatch: true
35
+ },
36
+ {
37
+ id: 4,
38
+ src: '/reports/thumbnail-portada-04@2x.png',
39
+ isSelected: false,
40
+ isPostMatch: true
41
+ }
42
+ ])
43
+
44
+ const demoCoversPreMatch = ref([
45
+ {
46
+ id: 1,
47
+ src: '/reports/thumbnail-portada-prmatch-01@2x.png',
48
+ isSelected: true,
49
+ isPostMatch: false
50
+ },
51
+ {
52
+ id: 2,
53
+ src: '/reports/thumbnail-portada-prmatch-02@2x.png',
54
+ isSelected: false,
55
+ isPostMatch: false
56
+ },
57
+ {
58
+ id: 3,
59
+ src: '/reports/thumbnail-portada-prmatch-03@2x.png',
60
+ isSelected: false,
61
+ isPostMatch: false
62
+ },
63
+ {
64
+ id: 4,
65
+ src: '/reports/thumbnail-portada-prmatch-04@2x.png',
66
+ isSelected: false,
67
+ isPostMatch: false
68
+ }
69
+ ])
70
+
71
+ const availableCovers = computed(() => {
72
+ return props.isPostMatch ? demoCoversPostMatch.value : demoCoversPreMatch.value
73
+ })
74
+
75
+ watch(() => availableCovers.value, (covers) => {
76
+ const initialCover = covers.find(c => c.id === props.initialCoverId)
77
+ if (initialCover) {
78
+ onClickCover(initialCover)
79
+ } else {
80
+ // If the initial cover is not found, select the first one
81
+ onClickCover(covers[0])
82
+ }
83
+ },
84
+
85
+ { immediate: true })
86
+
87
+ function onClickCover(cover) {
88
+ availableCovers.value.forEach((c => c.isSelected = false))
89
+ cover.isSelected = true
90
+ emit('select-cover', cover)
91
+ }
92
+ </script>
93
+
94
+ <template>
95
+ <div class="cover-selector">
96
+ <div class="cover-selector__text">
97
+ Portada
98
+ </div>
99
+ <div class="cover-selector__covers">
100
+ <div
101
+ v-for="cover of availableCovers"
102
+ :key="cover.id"
103
+ class="cover-selector__covers__cover"
104
+ :class="{ 'is-selected': cover.isSelected }"
105
+ @click="onClickCover(cover)"
106
+ >
107
+ <img :src="cover.src" alt="Cover Image"/>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </template>
112
+
113
+ <style scoped lang="scss">
114
+ .cover-selector {
115
+ display: flex;
116
+ align-items: center;
117
+ gap: 18px;
118
+ padding: 10px 20px;
119
+ border-radius: 5px;
120
+ box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.25);
121
+ background-color: #2a3843;
122
+
123
+ &__text {
124
+ font-family: Poppins-Medium, sans-serif;
125
+ font-size: 16px;
126
+ font-weight: 500;
127
+ font-stretch: normal;
128
+ font-style: normal;
129
+ line-height: normal;
130
+ letter-spacing: normal;
131
+ text-align: left;
132
+ color: #fff;
133
+ }
134
+
135
+ &__covers {
136
+ display: flex;
137
+ justify-content: center;
138
+ align-items: center;
139
+ gap: 8px;
140
+
141
+ &__cover {
142
+ height: 40px;
143
+ width: auto;
144
+ overflow: hidden;
145
+ cursor: pointer;
146
+ transition: transform 0.3s ease;
147
+
148
+ &.is-selected {
149
+ border: 1px solid #4289CC;
150
+ border-radius: 4px;
151
+ }
152
+
153
+ &:hover {
154
+ transform: scale(1.05);
155
+ }
156
+
157
+ img {
158
+ width: 100%;
159
+ height: 100%;
160
+ object-fit: cover;
161
+ }
162
+ }
163
+ }
164
+ }
165
+ </style>
@@ -1,66 +1,66 @@
1
- <script setup>
2
- const props = defineProps({
3
- title: {
4
- type: String,
5
- default: 'Item name'
6
- },
7
- isEmpty: {
8
- type: Boolean,
9
- default: false
10
- },
11
- isRival: {
12
- type: Boolean,
13
- default: false
14
- }
15
- })
16
- </script>
17
-
18
- <template>
19
- <div class="report-view">
20
- <div class="report-view__header">
21
- <div class="report-view__header__name">
22
- {{ title }}
23
- </div>
24
- <div role="button" class="report-view__header__actions">
25
- <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
26
- <path d="M3.56953 6.28672C3.56953 7.19972 2.83253 7.93672 1.91953 7.93672C1.00653 7.93672 0.269531 7.19972 0.269531 6.28672C0.269531 5.37372 1.00653 4.63672 1.91953 4.63672C2.83253 4.63672 3.56953 5.37372 3.56953 6.28672ZM8.51953 4.63672C7.60653 4.63672 6.86953 5.37372 6.86953 6.28672C6.86953 7.19972 7.60653 7.93672 8.51953 7.93672C9.43253 7.93672 10.1695 7.19972 10.1695 6.28672C10.1695 5.37372 9.43253 4.63672 8.51953 4.63672ZM15.1195 4.63672C14.2065 4.63672 13.4695 5.37372 13.4695 6.28672C13.4695 7.19972 14.2065 7.93672 15.1195 7.93672C16.0325 7.93672 16.7695 7.19972 16.7695 6.28672C16.7695 5.37372 16.0325 4.63672 15.1195 4.63672Z" fill="white"/>
27
- </svg>
28
- </div>
29
- </div>
30
- <div class="report-view__content">
31
- <slot />
32
- </div>
33
- </div>
34
- </template>
35
-
36
- <style scoped lang="scss">
37
- .report-view {
38
- height: 100%;
39
- width: 100%;
40
- border-radius: 5px;
41
- background-color: #1D2A35;
42
-
43
- &__header {
44
- display: flex;
45
- justify-content: space-between;
46
- border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
47
- padding: 0 16px;
48
-
49
- &__name {
50
- font-family: Poppins-Medium, sans-serif;
51
- font-size: 12px;
52
- font-weight: 500;
53
- font-stretch: normal;
54
- font-style: normal;
55
- line-height: normal;
56
- letter-spacing: normal;
57
- text-align: left;
58
- color: #fff;
59
- }
60
-
61
- &__actions {
62
- cursor: pointer;
63
- }
64
- }
65
- }
66
- </style>
1
+ <script setup>
2
+ const props = defineProps({
3
+ title: {
4
+ type: String,
5
+ default: 'Item name'
6
+ },
7
+ isEmpty: {
8
+ type: Boolean,
9
+ default: false
10
+ },
11
+ isRival: {
12
+ type: Boolean,
13
+ default: false
14
+ }
15
+ })
16
+ </script>
17
+
18
+ <template>
19
+ <div class="report-view">
20
+ <div class="report-view__header">
21
+ <div class="report-view__header__name">
22
+ {{ title }}
23
+ </div>
24
+ <div role="button" class="report-view__header__actions">
25
+ <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
26
+ <path d="M3.56953 6.28672C3.56953 7.19972 2.83253 7.93672 1.91953 7.93672C1.00653 7.93672 0.269531 7.19972 0.269531 6.28672C0.269531 5.37372 1.00653 4.63672 1.91953 4.63672C2.83253 4.63672 3.56953 5.37372 3.56953 6.28672ZM8.51953 4.63672C7.60653 4.63672 6.86953 5.37372 6.86953 6.28672C6.86953 7.19972 7.60653 7.93672 8.51953 7.93672C9.43253 7.93672 10.1695 7.19972 10.1695 6.28672C10.1695 5.37372 9.43253 4.63672 8.51953 4.63672ZM15.1195 4.63672C14.2065 4.63672 13.4695 5.37372 13.4695 6.28672C13.4695 7.19972 14.2065 7.93672 15.1195 7.93672C16.0325 7.93672 16.7695 7.19972 16.7695 6.28672C16.7695 5.37372 16.0325 4.63672 15.1195 4.63672Z" fill="white"/>
27
+ </svg>
28
+ </div>
29
+ </div>
30
+ <div class="report-view__content">
31
+ <slot />
32
+ </div>
33
+ </div>
34
+ </template>
35
+
36
+ <style scoped lang="scss">
37
+ .report-view {
38
+ height: 100%;
39
+ width: 100%;
40
+ border-radius: 5px;
41
+ background-color: #1D2A35;
42
+
43
+ &__header {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
47
+ padding: 0 16px;
48
+
49
+ &__name {
50
+ font-family: Poppins-Medium, sans-serif;
51
+ font-size: 12px;
52
+ font-weight: 500;
53
+ font-stretch: normal;
54
+ font-style: normal;
55
+ line-height: normal;
56
+ letter-spacing: normal;
57
+ text-align: left;
58
+ color: #fff;
59
+ }
60
+
61
+ &__actions {
62
+ cursor: pointer;
63
+ }
64
+ }
65
+ }
66
+ </style>
Binary file
@@ -1,30 +0,0 @@
1
- <svg width="849" height="257" viewBox="0 0 849 257" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M0.5 241.5L147 0H703L849 241.5H0.5Z" fill="#D9D9D9"/>
3
- <path d="M0.5 241.5L147 0H703L849 241.5H0.5Z" fill="url(#paint0_linear_221_1517)"/>
4
- <path d="M27.5 232.5L161.5 6.5L691.5 7.5L822.5 229.5L27.5 232.5Z" stroke="#BBBBBB"/>
5
- <path d="M146 33H226L165 194.5H50" stroke="#BBBBBB"/>
6
- <path d="M212.5 69C223.333 73 243.6 84.9 238 100.5C232.4 116.1 203.667 125.667 190 128.5" stroke="#BBBBBB"/>
7
- <path d="M707.5 33.5H628.5L687 193L800.5 192.5" stroke="#BBBBBB"/>
8
- <path d="M721 58H684.5L725.5 139.5H769.5" stroke="#BBBBBB"/>
9
- <path d="M495.5 96.5C495.5 107.157 488.115 116.896 475.977 123.999C463.851 131.095 447.067 135.5 428.5 135.5C409.933 135.5 393.149 131.095 381.023 123.999C368.885 116.896 361.5 107.157 361.5 96.5C361.5 85.8432 368.885 76.1037 381.023 69.0008C393.149 61.905 409.933 57.5 428.5 57.5C447.067 57.5 463.851 61.905 475.977 69.0008C488.115 76.1037 495.5 85.8432 495.5 96.5Z" stroke="#BBBBBB"/>
10
- <path d="M849 241H1V256H849V241Z" fill="url(#paint1_linear_221_1517)"/>
11
- <path d="M849 241H1V256H849V241Z" fill="url(#paint2_linear_221_1517)"/>
12
- <path d="M429 231V7" stroke="#BBBBBB"/>
13
- <path d="M131.407 58H166.5L123.994 141H81.5" stroke="#BBBBBB"/>
14
- <path d="M641.5 69C631.833 71.5 612.7 79.6 613.5 92C614.5 107.5 641 119.5 663 129" stroke="#BBBBBB"/>
15
- <defs>
16
- <linearGradient id="paint0_linear_221_1517" x1="215.705" y1="40.8717" x2="463.743" y2="439.384" gradientUnits="userSpaceOnUse">
17
- <stop stop-color="#0C1F52"/>
18
- <stop offset="0.553167" stop-color="#0C1F52"/>
19
- <stop offset="1" stop-color="#0C1F52"/>
20
- </linearGradient>
21
- <linearGradient id="paint1_linear_221_1517" x1="33.6861" y1="240.317" x2="34.8452" y2="278.283" gradientUnits="userSpaceOnUse">
22
- <stop stop-color="#3557A2"/>
23
- <stop offset="0.963266" stop-color="#192743"/>
24
- </linearGradient>
25
- <linearGradient id="paint2_linear_221_1517" x1="33.6861" y1="240.317" x2="34.8452" y2="278.283" gradientUnits="userSpaceOnUse">
26
- <stop stop-color="#3557A2"/>
27
- <stop offset="0.963266" stop-color="#192743"/>
28
- </linearGradient>
29
- </defs>
30
- </svg>