@golstats/gsc-reports 1.0.53 → 1.0.54

package/src/components/template-report-maker/CoverSelector.vue

@@ -1,165 +1,165 @@
-<script setup>
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  isPostMatch: {
-    type: Boolean,
-    default: true
-  },
-  initialCoverId: {
-    type: Number,
-    default: 1
-  }
-})
-
-const emit = defineEmits(['select-cover'])
-
-const demoCoversPostMatch = ref([
-  {
-    id: 1,
-    src: '/reports/thumbnail-portada-01@2x.png',
-    isSelected: true,
-    isPostMatch: true
-  },
-  {
-    id: 2,
-    src: '/reports/thumbnail-portada-02@2x.png',
-    isSelected: false,
-    isPostMatch: true
-  },
-  {
-    id: 3,
-    src: '/reports/thumbnail-portada-03@2x.png',
-    isSelected: false,
-    isPostMatch: true
-  },
-  {
-    id: 4,
-    src: '/reports/thumbnail-portada-04@2x.png',
-    isSelected: false,
-    isPostMatch: true
-  }
-])
-
-const demoCoversPreMatch = ref([
-  {
-    id: 1,
-    src: '/reports/thumbnail-portada-prmatch-01@2x.png',
-    isSelected: true,
-    isPostMatch: false
-  },
-  {
-    id: 2,
-    src: '/reports/thumbnail-portada-prmatch-02@2x.png',
-    isSelected: false,
-    isPostMatch: false
-  },
-  {
-    id: 3,
-    src: '/reports/thumbnail-portada-prmatch-03@2x.png',
-    isSelected: false,
-    isPostMatch: false
-  },
-  {
-    id: 4,
-    src: '/reports/thumbnail-portada-prmatch-04@2x.png',
-    isSelected: false,
-    isPostMatch: false
-  }
-])
-
-const availableCovers = computed(() => {
-  return props.isPostMatch ? demoCoversPostMatch.value : demoCoversPreMatch.value
-})
-
-watch(() => availableCovers.value, (covers) => {
-  const initialCover = covers.find(c => c.id === props.initialCoverId)
-  if (initialCover) {
-    onClickCover(initialCover)
-  } else {
-    // If the initial cover is not found, select the first one
-    onClickCover(covers[0])
-  }
-},
-
-{ immediate: true })
-
-function onClickCover(cover) {
-  availableCovers.value.forEach((c => c.isSelected = false))
-  cover.isSelected = true
-  emit('select-cover', cover)
-}
-</script>
-
-<template>
-  <div class="cover-selector">
-    <div class="cover-selector__text">
-      Portada
-    </div>
-    <div class="cover-selector__covers">
-      <div
-          v-for="cover of availableCovers"
-          :key="cover.id"
-          class="cover-selector__covers__cover"
-          :class="{ 'is-selected': cover.isSelected }"
-          @click="onClickCover(cover)"
-      >
-        <img :src="cover.src" alt="Cover Image"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.cover-selector {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 10px 20px;
-  border-radius: 5px;
-  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.25);
-  background-color: #2a3843;
-
-  &__text {
-    font-family: Poppins-Medium, sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: left;
-    color: #fff;
-  }
-
-  &__covers {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-
-    &__cover {
-      height: 40px;
-      width: auto;
-      overflow: hidden;
-      cursor: pointer;
-      transition: transform 0.3s ease;
-
-      &.is-selected {
-        border: 1px solid #4289CC;
-        border-radius: 4px;
-      }
-
-      &:hover {
-        transform: scale(1.05);
-      }
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-}
-</style>
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  isPostMatch: {
+    type: Boolean,
+    default: true
+  },
+  initialCoverId: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['select-cover'])
+
+const demoCoversPostMatch = ref([
+  {
+    id: 1,
+    src: '/reports/thumbnail-portada-01@2x.png',
+    isSelected: true,
+    isPostMatch: true
+  },
+  {
+    id: 2,
+    src: '/reports/thumbnail-portada-02@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  },
+  {
+    id: 3,
+    src: '/reports/thumbnail-portada-03@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  },
+  {
+    id: 4,
+    src: '/reports/thumbnail-portada-04@2x.png',
+    isSelected: false,
+    isPostMatch: true
+  }
+])
+
+const demoCoversPreMatch = ref([
+  {
+    id: 1,
+    src: '/reports/thumbnail-portada-prmatch-01@2x.png',
+    isSelected: true,
+    isPostMatch: false
+  },
+  {
+    id: 2,
+    src: '/reports/thumbnail-portada-prmatch-02@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  },
+  {
+    id: 3,
+    src: '/reports/thumbnail-portada-prmatch-03@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  },
+  {
+    id: 4,
+    src: '/reports/thumbnail-portada-prmatch-04@2x.png',
+    isSelected: false,
+    isPostMatch: false
+  }
+])
+
+const availableCovers = computed(() => {
+  return props.isPostMatch ? demoCoversPostMatch.value : demoCoversPreMatch.value
+})
+
+watch(() => availableCovers.value, (covers) => {
+  const initialCover = covers.find(c => c.id === props.initialCoverId)
+  if (initialCover) {
+    onClickCover(initialCover)
+  } else {
+    // If the initial cover is not found, select the first one
+    onClickCover(covers[0])
+  }
+},
+
+{ immediate: true })
+
+function onClickCover(cover) {
+  availableCovers.value.forEach((c => c.isSelected = false))
+  cover.isSelected = true
+  emit('select-cover', cover)
+}
+</script>
+
+<template>
+  <div class="cover-selector">
+    <div class="cover-selector__text">
+      Portada
+    </div>
+    <div class="cover-selector__covers">
+      <div
+          v-for="cover of availableCovers"
+          :key="cover.id"
+          class="cover-selector__covers__cover"
+          :class="{ 'is-selected': cover.isSelected }"
+          @click="onClickCover(cover)"
+      >
+        <img :src="cover.src" alt="Cover Image"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.cover-selector {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.25);
+  background-color: #2a3843;
+
+  &__text {
+    font-family: Poppins-Medium, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: left;
+    color: #fff;
+  }
+
+  &__covers {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    &__cover {
+      height: 40px;
+      width: auto;
+      overflow: hidden;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+
+      &.is-selected {
+        border: 1px solid #4289CC;
+        border-radius: 4px;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>

package/src/components/template-report-maker/ReportView.vue

@@ -1,66 +1,66 @@
-<script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    default: 'Item name'
-  },
-  isEmpty: {
-    type: Boolean,
-    default: false
-  },
-  isRival: {
-    type: Boolean,
-    default: false
-  }
-})
-</script>
-
-<template>
-  <div class="report-view">
-    <div class="report-view__header">
-      <div class="report-view__header__name">
-        {{ title }}
-      </div>
-      <div role="button" class="report-view__header__actions">
-        <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <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"/>
-        </svg>
-      </div>
-    </div>
-    <div class="report-view__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.report-view {
-  height: 100%;
-  width: 100%;
-  border-radius: 5px;
-  background-color: #1D2A35;
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
-    padding: 0 16px;
-
-    &__name {
-      font-family: Poppins-Medium, sans-serif;
-      font-size: 12px;
-      font-weight: 500;
-      font-stretch: normal;
-      font-style: normal;
-      line-height: normal;
-      letter-spacing: normal;
-      text-align: left;
-      color: #fff;
-    }
-
-    &__actions {
-      cursor: pointer;
-    }
-  }
-}
-</style>
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Item name'
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
+  },
+  isRival: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div class="report-view">
+    <div class="report-view__header">
+      <div class="report-view__header__name">
+        {{ title }}
+      </div>
+      <div role="button" class="report-view__header__actions">
+        <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <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"/>
+        </svg>
+      </div>
+    </div>
+    <div class="report-view__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.report-view {
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  background-color: #1D2A35;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
+    padding: 0 16px;
+
+    &__name {
+      font-family: Poppins-Medium, sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      text-align: left;
+      color: #fff;
+    }
+
+    &__actions {
+      cursor: pointer;
+    }
+  }
+}
+</style>