@golstats/gsc-reports 1.0.5 → 1.0.6

package/src/components/elementsTemplates/ReportItem.vue

@@ -127,40 +127,49 @@ import AnalisisPostMatchType3 from '../thumbnails-reports/AnalisisPostMatchType3
 import AnalisisPrematchType4 from '../thumbnails-reports/AnalisisPrematchType4.vue'
 import AnalisisPostMatchType4 from '../thumbnails-reports/AnalisisPostMatchType4.vue'
 import { formatDate } from '../../utils/dateUtils.js'
-const emit = defineEmits(['ver-reporte', 'renombrar', 'eliminar', 'edit-template', 'open-report'])
+
+const emit = defineEmits([
+  'ver-reporte',
+  'renombrar',
+  'eliminar',
+  'edit-template',
+  'open-report',
+  'download-report'
+])
 const props = defineProps({
   type: {
     type: Number,
-    default: 1,
+    default: 1
   },
   localTeam: {
     type: String,
-    default: 'América',
+    default: 'América'
   },
   report: {
     type: Object,
-    default: () => {},
+    default: () => {
+    }
   },
   visitorTeam: {
     type: String,
-    default: 'Chivas',
+    default: 'Chivas'
   },
   localScore: {
     type: Number,
-    default: 2,
+    default: 2
   },
   visitorScore: {
     type: Number,
-    default: 1,
+    default: 1
   },
   league: {
     type: String,
-    default: 'Liga MX',
+    default: 'Liga MX'
   },
   date: {
     type: String,
-    default: '15 Nov 2024',
-  },
+    default: '15 Nov 2024'
+  }
 })
 
 const showTooltip = ref(false)
@@ -197,6 +206,7 @@ function onEliminar() {
 
 function onDescargar() {
   console.log('descargar')
+  emit('download-report', props.report)
   showTooltip.value = false
 }
 
@@ -422,6 +432,7 @@ function onClickOpenReport() {
   height: 100vh;
   z-index: 2999;
 }
+
 .report-img-overlay {
   position: absolute;
   inset: 0;
@@ -435,10 +446,12 @@ function onClickOpenReport() {
   transition: opacity 0.2s;
   z-index: 3000;
 }
+
 .report-img-placeholder:hover .report-img-overlay {
   opacity: 1;
   pointer-events: auto;
 }
+
 .report-img-button {
   background: #11111140;
   color: #ffffff;
@@ -448,10 +461,10 @@ function onClickOpenReport() {
   font-size: 14px;
   font-family: 'Poppins-Medium', 'Poppins', Arial, sans-serif;
   cursor: pointer;
-  transition:
-    background 0.2s,
-    color 0.2s;
+  transition: background 0.2s,
+  color 0.2s;
 }
+
 .report-img-button:hover {
   border: 1px solid #ffffff;
 }

package/src/components/elementsTemplates/TooltipReportOptions.vue

@@ -1,97 +1,97 @@
-<template>
-  <div class="tooltip-report-options">
-    <ul>
-      <li class="option" @click="$emit('renombrar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
-          alt="Renombrar reporte"
-          class="icon"
-        />
-        Renombrar reporte
-      </li>
-      <li class="option" @click="$emit('descargar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-download.svg"
-          alt="Descargar reporte"
-          class="icon"
-        />
-        Descargar reporte
-      </li>
-      <li class="option" @click="$emit('eliminar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
-          alt="Eliminar reporte"
-          class="icon"
-        />
-        Eliminar reporte
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-const emit = defineEmits([
-  'ver-reporte',
-  'renombrar',
-  'editar',
-  'duplicar',
-  'descargar',
-  'eliminar',
-])
-</script>
-
-<style scoped>
-.tooltip-report-options {
-  position: absolute;
-  top: 44px;
-  right: 20px;
-  width: 215px;
-  height: 115px;
-  background: #2e3b46;
-  border-radius: 10px;
-  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
-  padding: 8px 0 0 0;
-  z-index: 3000;
-  font-family: Poppins-Regular;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  color: #fff;
-  font-family: Poppins-Regular;
-  font-size: 13px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: normal;
-  text-align: left;
-  padding: 8px 16px 8px 14px;
-  cursor: pointer;
-  transition:
-    background 0.2s,
-    color 0.2s;
-  gap: 14px;
-}
-
-.option:hover {
-  background: #434f59;
-  color: #cbee6b;
-}
-
-.icon {
-  width: 17px;
-  height: 17px;
-  display: inline-block;
-  background-size: contain;
-  background-repeat: no-repeat;
-  object-fit: contain;
-}
-</style>
+<template>
+  <div class="tooltip-report-options">
+    <ul>
+      <li class="option" @click="$emit('renombrar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
+          alt="Renombrar reporte"
+          class="icon"
+        />
+        Renombrar reporte
+      </li>
+      <li class="option" @click="$emit('descargar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-download.svg"
+          alt="Descargar reporte"
+          class="icon"
+        />
+        Descargar reporte
+      </li>
+      <li class="option" @click="$emit('eliminar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
+          alt="Eliminar reporte"
+          class="icon"
+        />
+        Eliminar reporte
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits([
+  'ver-reporte',
+  'renombrar',
+  'editar',
+  'duplicar',
+  'descargar',
+  'eliminar',
+])
+</script>
+
+<style scoped>
+.tooltip-report-options {
+  position: absolute;
+  top: 44px;
+  right: 20px;
+  width: 215px;
+  height: 115px;
+  background: #2e3b46;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
+  padding: 8px 0 0 0;
+  z-index: 3000;
+  font-family: Poppins-Regular;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+  padding: 8px 16px 8px 14px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  gap: 14px;
+}
+
+.option:hover {
+  background: #434f59;
+  color: #cbee6b;
+}
+
+.icon {
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  object-fit: contain;
+}
+</style>

package/src/components/elementsTemplates/TooltipTemplateOptions.vue

@@ -1,161 +1,161 @@
-<template>
-  <div class="tooltip-template-options">
-    <ul>
-      <li class="option" @click="$emit('generar-reporte')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report.svg"
-          alt="Generar reporte"
-          class="icon"
-        />
-        Generar reporte
-      </li>
-      <li class="option" @click="$emit('renombrar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
-          alt="Renombrar template"
-          class="icon"
-        />
-        Renombrar template
-      </li>
-      <li class="option" @click="$emit('editar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-edit.svg"
-          alt="Editar template"
-          class="icon"
-        />
-        Editar template
-      </li>
-      <li class="option" @click="$emit('duplicar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-duplicate.svg"
-          alt="Duplicar template"
-          class="icon"
-        />
-        Duplicar template
-      </li>
-      <li class="option" @click="$emit('eliminar')">
-        <img
-          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
-          alt="Eliminar template"
-          class="icon"
-        />
-        Eliminar template
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-const emit = defineEmits(['generar-reporte', 'renombrar', 'editar', 'duplicar', 'eliminar'])
-</script>
-
-<style scoped>
-.tooltip-template-options {
-  position: absolute;
-  top: 48px;
-  right: 20px;
-  width: 215px;
-  height: 185px;
-  background: #2e3b46;
-  border-radius: 10px;
-  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
-  padding: 8px 0 0 0;
-  z-index: 3000;
-  font-family: Poppins-Regular;
-}
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.option {
-  display: flex;
-  align-items: center;
-  color: #fff;
-  font-family: Poppins-Regular;
-  font-size: 13px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: normal;
-  text-align: left;
-  padding: 8px 16px 8px 14px;
-  cursor: pointer;
-  transition:
-    background 0.2s,
-    color 0.2s;
-  gap: 14px;
-}
-.option:hover {
-  background: #434f59;
-  color: #cbee6b;
-}
-.icon {
-  width: 17px;
-  height: 17px;
-  display: inline-block;
-  background-size: contain;
-  background-repeat: no-repeat;
-  object-fit: contain;
-}
-.icon-doc {
-  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/document--v1.png');
-}
-.icon-rename {
-  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/replace.png');
-}
-
-.divider {
-  width: 100%;
-  height: 1px;
-  background: #3d4a54;
-  margin: 6px 0 0 0;
-}
-.autogen-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 7px;
-  padding: 10px 14px 12px 14px;
-}
-.switch {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-.switch-track {
-  width: 28px;
-  height: 16px;
-  background: transparent;
-  border-radius: 10px;
-  position: relative;
-  transition: background 0.2s;
-  border: 1px solid #fff;
-}
-.switch-thumb {
-  width: 12px;
-  height: 12px;
-  background: #cbee6b;
-  border-radius: 50%;
-  position: absolute;
-  top: 2px;
-  left: 1px;
-  transition: left 0.2s;
-  box-shadow: 0 1px 4px 0 rgba(203, 238, 107, 0.15);
-}
-.switch-thumb.on {
-  left: 14px;
-}
-.autogen-label {
-  color: #fff;
-  font-family: Poppins-Regular;
-  font-size: 13px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.5;
-  letter-spacing: normal;
-  text-align: left;
-}
-</style>
+<template>
+  <div class="tooltip-template-options">
+    <ul>
+      <li class="option" @click="$emit('generar-reporte')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-report.svg"
+          alt="Generar reporte"
+          class="icon"
+        />
+        Generar reporte
+      </li>
+      <li class="option" @click="$emit('renombrar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-rename.svg"
+          alt="Renombrar template"
+          class="icon"
+        />
+        Renombrar template
+      </li>
+      <li class="option" @click="$emit('editar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-edit.svg"
+          alt="Editar template"
+          class="icon"
+        />
+        Editar template
+      </li>
+      <li class="option" @click="$emit('duplicar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-duplicate.svg"
+          alt="Duplicar template"
+          class="icon"
+        />
+        Duplicar template
+      </li>
+      <li class="option" @click="$emit('eliminar')">
+        <img
+          src="https://golstatsimages.blob.core.windows.net/reports-images/icn-delete.svg"
+          alt="Eliminar template"
+          class="icon"
+        />
+        Eliminar template
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['generar-reporte', 'renombrar', 'editar', 'duplicar', 'eliminar'])
+</script>
+
+<style scoped>
+.tooltip-template-options {
+  position: absolute;
+  top: 48px;
+  right: 20px;
+  width: 215px;
+  height: 185px;
+  background: #2e3b46;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
+  padding: 8px 0 0 0;
+  z-index: 3000;
+  font-family: Poppins-Regular;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.option {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+  padding: 8px 16px 8px 14px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  gap: 14px;
+}
+.option:hover {
+  background: #434f59;
+  color: #cbee6b;
+}
+.icon {
+  width: 17px;
+  height: 17px;
+  display: inline-block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  object-fit: contain;
+}
+.icon-doc {
+  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/document--v1.png');
+}
+.icon-rename {
+  background-image: url('https://img.icons8.com/ios-filled/24/cbee6b/replace.png');
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #3d4a54;
+  margin: 6px 0 0 0;
+}
+.autogen-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 7px;
+  padding: 10px 14px 12px 14px;
+}
+.switch {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.switch-track {
+  width: 28px;
+  height: 16px;
+  background: transparent;
+  border-radius: 10px;
+  position: relative;
+  transition: background 0.2s;
+  border: 1px solid #fff;
+}
+.switch-thumb {
+  width: 12px;
+  height: 12px;
+  background: #cbee6b;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 1px;
+  transition: left 0.2s;
+  box-shadow: 0 1px 4px 0 rgba(203, 238, 107, 0.15);
+}
+.switch-thumb.on {
+  left: 14px;
+}
+.autogen-label {
+  color: #fff;
+  font-family: Poppins-Regular;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-align: left;
+}
+</style>