@golstats/gsc-top-player 1.0.11 → 1.0.13

package/src/components/comparative/gsc-button.vue

@@ -1,198 +1,198 @@
-<template>
-  <div>
-    <div
-      v-if="type == 0"
-      :class="['button', status && typeOnOff && 'button-active']"
-      :style="[customStyle, status && typeOnOff && customActive]"
-      @click="btnClick"
-    >
-      <img
-        :class="mini ? 'icon-txt' : 'icon'"
-        :style="{ width: iconSize }"
-        :src="icon"
-        v-if="icon && iconPosition.toLowerCase() === 'left'"
-      />
-      <div class="text" v-if="textValue">{{ textValue }}</div>
-    </div>
-    <div v-if="type == 1" class="button-target" @click="btnClick">
-      <div class="stats">
-        <div class="numstats">{{ textStat }}</div>
-      </div>
-      <div class="leyend">{{ textCategory }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    type: { type: Number, default: 0 },
-    value: { type: Boolean, default: false },
-    textValue: String,
-    iconPosition: { type: String, default: 'left' },
-    iconSize: String,
-    mini: { type: Boolean, default: false },
-    fontColor: { type: String, default: '#FFFFFF' },
-    textDecoration: String,
-    fontSize: { type: String, default: '16px' },
-    fontSizeStat: { type: String, default: '16px' },
-    fontStyle: String,
-    fontFamily: { type: String, default: 'Poppins-Regular' },
-    height: { type: String, default: 'fit-content' },
-    width: { type: String, default: 'fit-content' },
-    buttonMaxWidth: { type: String, default: 'auto' },
-    borderRadius: { type: String, default: '0px' },
-    borderType: { type: String, default: 'solid' },
-    borderWidth: { type: Number, default: 0 },
-    borderWidthBtn: { type: String, default: '2px' },
-    borderColor: String,
-    backgroundColor: { type: String, default: 'none' },
-    activeBackgroundColor: { type: String, default: '#000000' },
-    activeBorderWidth: { type: Number, default: 2 },
-    activeBorderType: { type: String, default: 'solid' },
-    activeBorderColor: { type: String, default: '#cbee6b' },
-    activeColorText: { type: String, default: '#FFFFFF' },
-    cursorType: { type: String, default: 'default' },
-    typeOnOff: { type: Boolean, default: false },
-    textCategory: String,
-    textStat: String,
-    marginLeftStat: { type: String, default: '15%' },
-  },
-  watch: {
-    value: {
-      deep: true,
-      immediate: true,
-      handler(newValue) {
-        this.status = newValue
-      },
-    },
-  },
-  data() {
-    return { status: false }
-  },
-  computed: {
-    customStyle() {
-      return {
-        height: this.height,
-        width: this.width,
-        maxWidth: this.buttonMaxWidth,
-        backgroundColor: this.backgroundColor,
-        borderRadius: this.borderRadius,
-        border: `${this.borderType} ${this.borderWidth}px ${this.borderColor}`,
-        color: this.fontColor,
-        textDecoration: this.textDecoration,
-        cursor: this.cursorType,
-        fontSize: this.fontSize,
-        fontStyle: this.fontStyle,
-        fontFamily: `${this.fontFamily} !important`,
-      }
-    },
-    customActive() {
-      return {
-        backgroundColor: this.activeBackgroundColor,
-        color: this.activeColorText,
-        border: `${this.activeBorderType} ${this.activeBorderWidth}px ${this.activeBorderColor}`,
-      }
-    },
-  },
-  methods: {
-    btnClick(id) {
-      this.$emit('click', id)
-      if (this.typeOnOff) {
-        this.status = !this.status
-        this.$emit('status', this.status)
-      }
-    },
-  },
-}
-</script>
-
-<style scoped>
-.button,
-.button-active {
-  display: inline-flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  overflow: none;
-  cursor: pointer !important;
-  padding: 0 6px;
-}
-.button:hover {
-  cursor: pointer !important;
-  opacity: 0.8;
-}
-.button-target {
-  display: inline-block;
-  overflow: hidden;
-  height: v-bind(height);
-  border-width: v-bind(borderWidthBtn) !important;
-  border-style: v-bind(borderType) !important;
-  border-color: v-bind(borderColor) !important;
-  border-radius: v-bind(borderRadius) !important;
-  width: v-bind(width);
-  background-color: v-bind(backgroundColor);
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  overflow: none;
-  cursor: pointer !important;
-  cursor: v-bind(cursorType) !important;
-  font-size: v-bind(fontSize) !important;
-  font-style: v-bind(fontStyle) !important;
-  font-family: v-bind(fontFamily) !important;
-}
-.stats {
-  display: inline-flex;
-  width: 100%;
-  padding-top: 5px;
-  justify-content: left;
-  align-items: center;
-  align-content: center;
-  height: 60%;
-}
-.iconstats {
-  width: 14px;
-  height: 14px;
-  margin-left: v-bind(marginLeftStat); /* dinamico */
-}
-.numstats {
-  font-family: 'Poppins-SemiBold';
-  color: #ffffff;
-  font-size: v-bind(fontSizeStat);
-  margin-left: 7px;
-}
-.leyend {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  font-family: 'Poppins-Regular';
-  color: #a0a3a5;
-  width: 100%;
-  height: 15%;
-}
-.icon {
-  margin-left: 0px;
-}
-.icon-txt {
-  margin-left: 2px;
-}
-.text {
-  font-size: 10px;
-  padding: 4px;
-  max-width: 98%;
-  white-space: nowrap;
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-  font-size: v-bind(fontSize) !important;
-  font-style: v-bind(fontStyle) !important;
-  font-family: v-bind(fontFamily) !important;
-}
-.text-mini {
-  font-size: 10px;
-  white-space: nowrap;
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-}
-</style>
+<template>
+  <div>
+    <div
+      v-if="type == 0"
+      :class="['button', status && typeOnOff && 'button-active']"
+      :style="[customStyle, status && typeOnOff && customActive]"
+      @click="btnClick"
+    >
+      <img
+        :class="mini ? 'icon-txt' : 'icon'"
+        :style="{ width: iconSize }"
+        :src="icon"
+        v-if="icon && iconPosition.toLowerCase() === 'left'"
+      />
+      <div class="text" v-if="textValue">{{ textValue }}</div>
+    </div>
+    <div v-if="type == 1" class="button-target" @click="btnClick">
+      <div class="stats">
+        <div class="numstats">{{ textStat }}</div>
+      </div>
+      <div class="leyend">{{ textCategory }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: { type: Number, default: 0 },
+    value: { type: Boolean, default: false },
+    textValue: String,
+    iconPosition: { type: String, default: 'left' },
+    iconSize: String,
+    mini: { type: Boolean, default: false },
+    fontColor: { type: String, default: '#FFFFFF' },
+    textDecoration: String,
+    fontSize: { type: String, default: '16px' },
+    fontSizeStat: { type: String, default: '16px' },
+    fontStyle: String,
+    fontFamily: { type: String, default: 'Poppins-Regular' },
+    height: { type: String, default: 'fit-content' },
+    width: { type: String, default: 'fit-content' },
+    buttonMaxWidth: { type: String, default: 'auto' },
+    borderRadius: { type: String, default: '0px' },
+    borderType: { type: String, default: 'solid' },
+    borderWidth: { type: Number, default: 0 },
+    borderWidthBtn: { type: String, default: '2px' },
+    borderColor: String,
+    backgroundColor: { type: String, default: 'none' },
+    activeBackgroundColor: { type: String, default: '#000000' },
+    activeBorderWidth: { type: Number, default: 2 },
+    activeBorderType: { type: String, default: 'solid' },
+    activeBorderColor: { type: String, default: '#cbee6b' },
+    activeColorText: { type: String, default: '#FFFFFF' },
+    cursorType: { type: String, default: 'default' },
+    typeOnOff: { type: Boolean, default: false },
+    textCategory: String,
+    textStat: String,
+    marginLeftStat: { type: String, default: '15%' },
+  },
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(newValue) {
+        this.status = newValue
+      },
+    },
+  },
+  data() {
+    return { status: false }
+  },
+  computed: {
+    customStyle() {
+      return {
+        height: this.height,
+        width: this.width,
+        maxWidth: this.buttonMaxWidth,
+        backgroundColor: this.backgroundColor,
+        borderRadius: this.borderRadius,
+        border: `${this.borderType} ${this.borderWidth}px ${this.borderColor}`,
+        color: this.fontColor,
+        textDecoration: this.textDecoration,
+        cursor: this.cursorType,
+        fontSize: this.fontSize,
+        fontStyle: this.fontStyle,
+        fontFamily: `${this.fontFamily} !important`,
+      }
+    },
+    customActive() {
+      return {
+        backgroundColor: this.activeBackgroundColor,
+        color: this.activeColorText,
+        border: `${this.activeBorderType} ${this.activeBorderWidth}px ${this.activeBorderColor}`,
+      }
+    },
+  },
+  methods: {
+    btnClick(id) {
+      this.$emit('click', id)
+      if (this.typeOnOff) {
+        this.status = !this.status
+        this.$emit('status', this.status)
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.button,
+.button-active {
+  display: inline-flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  overflow: none;
+  cursor: pointer !important;
+  padding: 0 6px;
+}
+.button:hover {
+  cursor: pointer !important;
+  opacity: 0.8;
+}
+.button-target {
+  display: inline-block;
+  overflow: hidden;
+  height: v-bind(height);
+  border-width: v-bind(borderWidthBtn) !important;
+  border-style: v-bind(borderType) !important;
+  border-color: v-bind(borderColor) !important;
+  border-radius: v-bind(borderRadius) !important;
+  width: v-bind(width);
+  background-color: v-bind(backgroundColor);
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  overflow: none;
+  cursor: pointer !important;
+  cursor: v-bind(cursorType) !important;
+  font-size: v-bind(fontSize) !important;
+  font-style: v-bind(fontStyle) !important;
+  font-family: v-bind(fontFamily) !important;
+}
+.stats {
+  display: inline-flex;
+  width: 100%;
+  padding-top: 5px;
+  justify-content: left;
+  align-items: center;
+  align-content: center;
+  height: 60%;
+}
+.iconstats {
+  width: 14px;
+  height: 14px;
+  margin-left: v-bind(marginLeftStat); /* dinamico */
+}
+.numstats {
+  font-family: 'Poppins-SemiBold';
+  color: #ffffff;
+  font-size: v-bind(fontSizeStat);
+  margin-left: 7px;
+}
+.leyend {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  font-family: 'Poppins-Regular';
+  color: #a0a3a5;
+  width: 100%;
+  height: 15%;
+}
+.icon {
+  margin-left: 0px;
+}
+.icon-txt {
+  margin-left: 2px;
+}
+.text {
+  font-size: 10px;
+  padding: 4px;
+  max-width: 98%;
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  font-size: v-bind(fontSize) !important;
+  font-style: v-bind(fontStyle) !important;
+  font-family: v-bind(fontFamily) !important;
+}
+.text-mini {
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+}
+</style>