@tiddh/brave-vue 1.93.245 → 1.93.248

package/dist/src/components/Avatar/Avatar.vue

@@ -1,490 +1,490 @@
-<template>
-  <div class="avatar-page">
-    <CustomizationView
-      :custom_properties="{
-        character_id: character_id,
-        product_id: product_id,
-        type_id: type_id,
-        is_male: is_male,
-        slug: character_slug,
-        uuid: uuid,
-        user_data: {
-          properties: custom_properties,
-          type_id: type_id,
-        },
-      }"
-      :gradient_colors="gradient_colors"
-      :is_subscription="is_subscription"
-      :builder_api="'https://builder.dentrodahistoria.com.br/api'"
-      :builderLayoutId="builderLayoutId"
-      :language="language"
-      :typeLanguage="typeLanguage"
-      :dir="dir"
-      @startedMethod="started"
-      @completedMethod="completed"
-    />
-  </div>
-</template>
-
-<script>
-const axios = require("axios");
-
-import CustomizationView from "./elements/CustomizationView.vue";
-//import monthsHelper from "./utils.js";
-
-export default {
-  name: "Avatar",
-  components: {
-    CustomizationView,
-  },
-  props: {
-    /**
-     * ID do personagem.<br>
-     * Example: `57`
-     */
-    character_id: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * Slug do personagem.<br>
-     * Example: `turma_da_monica`
-     */
-    character_slug: {
-      type: String,
-      required: false,
-      default: "noone",
-    },
-    /**
-     * ID no produto no ecommerce.<br>
-     * Example: `595`
-     */
-    product_id: {
-      type: Number,
-      required: true,
-    },
-
-    /**
-     * ID do gênero.<br>
-     * Example: `88`
-     */
-    type_id: {
-      type: Number,
-      default: null,
-      required: false,
-    },
-
-    /**
-     * Se personagem é menino.<br>
-     * Values: `true` `false`
-     */
-    is_male: {
-      type: Boolean,
-      required: true,
-    },
-    /**
-     * Nome da criança.<br>
-     * Example: `Diegito`
-     */
-    name: {
-      type: String,
-      required: true,
-    },
-    /**
-     * Dia do aniversário ou camisa.<br>
-     * Example: `6`
-     */
-    custom_numero: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    /**
-     * Mês do aniversário.<br>
-     * Example: `6`
-     */
-    custom_mes: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    /**
-     * Dedicatória.<br>
-     * Example: `Espero que goste de fazer parte dessa aventura. Boa leitura!`
-     */
-    custom_dedicatoria: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * Mooner.<br>
-     * Values: `true` `false`
-     */
-    custom_mooner: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /**
-     * Se a personalização pertence a uma assinatura.<br>
-     * Values: `true` `false`
-     */
-    is_subscription: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * UUID de uma customização existente, irá carregar uma personalização.<br>
-     * Example: `ddh5dbacd9713f23`
-     */
-    uuid: {
-      type: String,
-      required: false,
-    },
-    /**
-     * Cores do gradiente de background. Caso vazio, BG será branco.<br>
-     * Example: `{ "bgInner":"rgb(255, 255, 255)", "bgCentral":"rgb(183, 254, 255)", "bgOuter":"rgb(40, 138, 255)" }`
-     */
-    gradient_colors: {
-      type: Object,
-      required: false,
-      default: {
-        bgInner: "#FFFFFF",
-        bgCentral: "#B7FEFF",
-        bgOuter: "#288AFF",
-      },
-    },
-    /**
-     * LayoutId do Builder para salvar contextos de livros diferentes.<br>
-     * Example: `12345`
-     */
-    builderLayoutId: {
-      type: [Number, String],
-      required: false,
-    },
-    /**
-     * Language utilizado para selecionar o idioma do livro, este parametro deve ser informado na chamada da treelist e na criação do personagem
-     */
-    language: {
-      type: String,
-      required: false,
-    },
-
-    typeLanguage: {
-      type: String,
-      required: false,
-      default: "pt",
-    },
-
-    dir: {
-      type: String,
-      default: "ltr",
-      required: false,
-    },
-  },
-  data() {
-    return {
-      custom_properties: {},
-    };
-  },
-  computed: {
-    monthsHelper(month) {
-      switch (month) {
-        case 1:
-          return "Janeiro";
-          break;
-        case 2:
-          return "Fevereiro";
-          break;
-        case 3:
-          return "Março";
-          break;
-        case 4:
-          return "Abril";
-          break;
-        case 5:
-          return "Maio";
-          break;
-        case 6:
-          return "Junho";
-          break;
-        case 7:
-          return "Julho";
-          break;
-        case 8:
-          return "Agosto";
-          break;
-        case 9:
-          return "Setembro";
-          break;
-        case 10:
-          return "Outubro";
-          break;
-        case 11:
-          return "Novembro";
-          break;
-        case 12:
-          return "Dezembro";
-          break;
-      }
-    },
-  },
-  async created() {
-    const self = this;
-
-    this.custom_properties = {
-      nome: {
-        code: "nome",
-        property_id: 24,
-        value: this.name,
-      },
-    };
-
-    if (this.custom_numero) {
-      this.custom_properties.numero = {
-        code: "numero",
-        property_id: 29,
-        value: this.custom_numero.toString(),
-      };
-    }
-    if (this.custom_mes) {
-      this.custom_properties.mes = {
-        code: "mes",
-        property_id: 38,
-        value: this.monthsHelperByName(this.custom_mes),
-      };
-    }
-    if (this.custom_dedicatoria) {
-      this.custom_properties.dedicatoria = {
-        code: "dedicatoria",
-        property_id: 26,
-        value: this.custom_dedicatoria,
-      };
-    }
-
-    if (this.custom_mooner) {
-      var nameMooner = "Morsax";
-
-      if (self.uuid) {
-        axios
-          .get(
-            "https://builder.dentrodahistoria.com.br/api/customs_characters/" +
-              self.uuid
-          )
-          .then((response) => {
-            console.log(response);
-            if (response.data.custom.user_data.properties["nome-do-mooner"]) {
-              nameMooner =
-                response.data.custom.user_data.properties["nome-do-mooner"]
-                  .value;
-            }
-
-            this.custom_properties["nome-do-mooner"] = {
-              code: "nome-do-mooner",
-              property_id: 154,
-              value: nameMooner,
-            };
-          })
-          .catch(function (error) {
-            // let fieldError = {
-            // 	field: "error-modal",
-            // 	msg: error.response.data.message,
-            // 	rule: "error", // optional
-            // };
-            // self.$validator.errors.add(fieldError);
-
-            this.custom_properties["nome-do-mooner"] = {
-              code: "nome-do-mooner",
-              property_id: 154,
-              value: nameMooner,
-            };
-
-            console.log("Erro ao trazer nome do mooner");
-          });
-      }
-
-      this.custom_properties["nome-do-mooner"] = {
-        code: "nome-do-mooner",
-        property_id: 154,
-        value: nameMooner,
-      };
-    }
-  },
-  mounted() {
-    document.body.style.overflow = "hidden";
-
-    let vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty("--vh", `${vh}px`);
-
-    this.initiated();
-  },
-  beforeDestroy() {
-    document.body.style.overflow = "unset";
-  },
-  methods: {
-    monthsHelperByName(month) {
-      switch (month) {
-        case 1:
-          return "Janeiro";
-          break;
-        case 2:
-          return "Fevereiro";
-          break;
-        case 3:
-          return "Março";
-          break;
-        case 4:
-          return "Abril";
-          break;
-        case 5:
-          return "Maio";
-          break;
-        case 6:
-          return "Junho";
-          break;
-        case 7:
-          return "Julho";
-          break;
-        case 8:
-          return "Agosto";
-          break;
-        case 9:
-          return "Setembro";
-          break;
-        case 10:
-          return "Outubro";
-          break;
-        case 11:
-          return "Novembro";
-          break;
-        case 12:
-          return "Dezembro";
-          break;
-      }
-    },
-
-    initiated() {
-      /**
-       * Função disparada no `mounted` do componente.
-       */
-      this.$emit("initiated");
-    },
-    started() {
-      /**
-       * Função disparada ao clicar no botão para gerar a customização.
-       */
-      this.$emit("started");
-    },
-    completed(payload) {
-      /**
-       * Função disparada ao ser finalizada customização. Recebe um objeto.
-       */
-      this.$emit("completed", payload);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-hr {
-  margin: 10px -1.5rem;
-}
-h1 {
-  font-family: "Nunito";
-  font-size: 24px;
-  font-weight: 900;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #000000;
-  margin-top: 0px;
-  margin-bottom: 15px;
-
-  &:first-child {
-    display: none;
-  }
-}
-
-.ddh-sidebar,
-.ddh-sidebar.hide-sidebar {
-  display: none !important;
-}
-
-html {
-  --scale: 1;
-  --translate: 0%;
-}
-
-.loading-view {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: white;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.avatar-page-1 {
-  position: absolute;
-  z-index: 3;
-}
-
-.avatar-page {
-  min-height: 100vh;
-  position: absolute;
-  width: 100%;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  background: white;
-  @media (max-width: 992px) {
-    min-height: 0;
-    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
-    height: calc(var(--vh, 1vh) * 100);
-    overflow: hidden;
-  }
-}
-.return {
-  position: fixed;
-  z-index: 99;
-  .icon {
-    width: 38px;
-    height: 38px;
-    position: absolute;
-    z-index: 30;
-    padding: 0.95238rem 2.77778vw;
-    svg {
-      width: 38px;
-      height: 38px;
-      path {
-        fill: #afa2ba !important;
-        stroke: #afa2ba !important;
-        transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-    }
-    &:hover {
-      cursor: pointer;
-      svg,
-      path {
-        fill: #1ad3d9 !important;
-        stroke: #1ad3d9 !important;
-      }
-    }
-    &:active {
-      svg {
-        transform: scale(0.9);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="avatar-page">
+    <CustomizationView
+      :custom_properties="{
+        character_id: character_id,
+        product_id: product_id,
+        type_id: type_id,
+        is_male: is_male,
+        slug: character_slug,
+        uuid: uuid,
+        user_data: {
+          properties: custom_properties,
+          type_id: type_id,
+        },
+      }"
+      :gradient_colors="gradient_colors"
+      :is_subscription="is_subscription"
+      :builder_api="'https://builder.dentrodahistoria.com.br/api'"
+      :builderLayoutId="builderLayoutId"
+      :language="language"
+      :typeLanguage="typeLanguage"
+      :dir="dir"
+      @startedMethod="started"
+      @completedMethod="completed"
+    />
+  </div>
+</template>
+
+<script>
+const axios = require("axios");
+
+import CustomizationView from "./elements/CustomizationView.vue";
+//import monthsHelper from "./utils.js";
+
+export default {
+  name: "Avatar",
+  components: {
+    CustomizationView,
+  },
+  props: {
+    /**
+     * ID do personagem.<br>
+     * Example: `57`
+     */
+    character_id: {
+      type: Number,
+      required: true,
+    },
+    /**
+     * Slug do personagem.<br>
+     * Example: `turma_da_monica`
+     */
+    character_slug: {
+      type: String,
+      required: false,
+      default: "noone",
+    },
+    /**
+     * ID no produto no ecommerce.<br>
+     * Example: `595`
+     */
+    product_id: {
+      type: Number,
+      required: true,
+    },
+
+    /**
+     * ID do gênero.<br>
+     * Example: `88`
+     */
+    type_id: {
+      type: Number,
+      default: null,
+      required: false,
+    },
+
+    /**
+     * Se personagem é menino.<br>
+     * Values: `true` `false`
+     */
+    is_male: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Nome da criança.<br>
+     * Example: `Diegito`
+     */
+    name: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Dia do aniversário ou camisa.<br>
+     * Example: `6`
+     */
+    custom_numero: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    /**
+     * Mês do aniversário.<br>
+     * Example: `6`
+     */
+    custom_mes: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    /**
+     * Dedicatória.<br>
+     * Example: `Espero que goste de fazer parte dessa aventura. Boa leitura!`
+     */
+    custom_dedicatoria: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Mooner.<br>
+     * Values: `true` `false`
+     */
+    custom_mooner: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    /**
+     * Se a personalização pertence a uma assinatura.<br>
+     * Values: `true` `false`
+     */
+    is_subscription: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * UUID de uma customização existente, irá carregar uma personalização.<br>
+     * Example: `ddh5dbacd9713f23`
+     */
+    uuid: {
+      type: String,
+      required: false,
+    },
+    /**
+     * Cores do gradiente de background. Caso vazio, BG será branco.<br>
+     * Example: `{ "bgInner":"rgb(255, 255, 255)", "bgCentral":"rgb(183, 254, 255)", "bgOuter":"rgb(40, 138, 255)" }`
+     */
+    gradient_colors: {
+      type: Object,
+      required: false,
+      default: {
+        bgInner: "#FFFFFF",
+        bgCentral: "#B7FEFF",
+        bgOuter: "#288AFF",
+      },
+    },
+    /**
+     * LayoutId do Builder para salvar contextos de livros diferentes.<br>
+     * Example: `12345`
+     */
+    builderLayoutId: {
+      type: [Number, String],
+      required: false,
+    },
+    /**
+     * Language utilizado para selecionar o idioma do livro, este parametro deve ser informado na chamada da treelist e na criação do personagem
+     */
+    language: {
+      type: String,
+      required: false,
+    },
+
+    typeLanguage: {
+      type: String,
+      required: false,
+      default: "pt",
+    },
+
+    dir: {
+      type: String,
+      default: "ltr",
+      required: false,
+    },
+  },
+  data() {
+    return {
+      custom_properties: {},
+    };
+  },
+  computed: {
+    monthsHelper(month) {
+      switch (month) {
+        case 1:
+          return "Janeiro";
+          break;
+        case 2:
+          return "Fevereiro";
+          break;
+        case 3:
+          return "Março";
+          break;
+        case 4:
+          return "Abril";
+          break;
+        case 5:
+          return "Maio";
+          break;
+        case 6:
+          return "Junho";
+          break;
+        case 7:
+          return "Julho";
+          break;
+        case 8:
+          return "Agosto";
+          break;
+        case 9:
+          return "Setembro";
+          break;
+        case 10:
+          return "Outubro";
+          break;
+        case 11:
+          return "Novembro";
+          break;
+        case 12:
+          return "Dezembro";
+          break;
+      }
+    },
+  },
+  async created() {
+    const self = this;
+
+    this.custom_properties = {
+      nome: {
+        code: "nome",
+        property_id: 24,
+        value: this.name,
+      },
+    };
+
+    if (this.custom_numero) {
+      this.custom_properties.numero = {
+        code: "numero",
+        property_id: 29,
+        value: this.custom_numero.toString(),
+      };
+    }
+    if (this.custom_mes) {
+      this.custom_properties.mes = {
+        code: "mes",
+        property_id: 38,
+        value: this.monthsHelperByName(this.custom_mes),
+      };
+    }
+    if (this.custom_dedicatoria) {
+      this.custom_properties.dedicatoria = {
+        code: "dedicatoria",
+        property_id: 26,
+        value: this.custom_dedicatoria,
+      };
+    }
+
+    if (this.custom_mooner) {
+      var nameMooner = "Morsax";
+
+      if (self.uuid) {
+        axios
+          .get(
+            "https://builder.dentrodahistoria.com.br/api/customs_characters/" +
+              self.uuid
+          )
+          .then((response) => {
+            console.log(response);
+            if (response.data.custom.user_data.properties["nome-do-mooner"]) {
+              nameMooner =
+                response.data.custom.user_data.properties["nome-do-mooner"]
+                  .value;
+            }
+
+            this.custom_properties["nome-do-mooner"] = {
+              code: "nome-do-mooner",
+              property_id: 154,
+              value: nameMooner,
+            };
+          })
+          .catch(function (error) {
+            // let fieldError = {
+            // 	field: "error-modal",
+            // 	msg: error.response.data.message,
+            // 	rule: "error", // optional
+            // };
+            // self.$validator.errors.add(fieldError);
+
+            this.custom_properties["nome-do-mooner"] = {
+              code: "nome-do-mooner",
+              property_id: 154,
+              value: nameMooner,
+            };
+
+            console.log("Erro ao trazer nome do mooner");
+          });
+      }
+
+      this.custom_properties["nome-do-mooner"] = {
+        code: "nome-do-mooner",
+        property_id: 154,
+        value: nameMooner,
+      };
+    }
+  },
+  mounted() {
+    document.body.style.overflow = "hidden";
+
+    let vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+    this.initiated();
+  },
+  beforeDestroy() {
+    document.body.style.overflow = "unset";
+  },
+  methods: {
+    monthsHelperByName(month) {
+      switch (month) {
+        case 1:
+          return "Janeiro";
+          break;
+        case 2:
+          return "Fevereiro";
+          break;
+        case 3:
+          return "Março";
+          break;
+        case 4:
+          return "Abril";
+          break;
+        case 5:
+          return "Maio";
+          break;
+        case 6:
+          return "Junho";
+          break;
+        case 7:
+          return "Julho";
+          break;
+        case 8:
+          return "Agosto";
+          break;
+        case 9:
+          return "Setembro";
+          break;
+        case 10:
+          return "Outubro";
+          break;
+        case 11:
+          return "Novembro";
+          break;
+        case 12:
+          return "Dezembro";
+          break;
+      }
+    },
+
+    initiated() {
+      /**
+       * Função disparada no `mounted` do componente.
+       */
+      this.$emit("initiated");
+    },
+    started() {
+      /**
+       * Função disparada ao clicar no botão para gerar a customização.
+       */
+      this.$emit("started");
+    },
+    completed(payload) {
+      /**
+       * Função disparada ao ser finalizada customização. Recebe um objeto.
+       */
+      this.$emit("completed", payload);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+hr {
+  margin: 10px -1.5rem;
+}
+h1 {
+  font-family: "Nunito";
+  font-size: 24px;
+  font-weight: 900;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #000000;
+  margin-top: 0px;
+  margin-bottom: 15px;
+
+  &:first-child {
+    display: none;
+  }
+}
+
+.ddh-sidebar,
+.ddh-sidebar.hide-sidebar {
+  display: none !important;
+}
+
+html {
+  --scale: 1;
+  --translate: 0%;
+}
+
+.loading-view {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.avatar-page-1 {
+  position: absolute;
+  z-index: 3;
+}
+
+.avatar-page {
+  min-height: 100vh;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background: white;
+  @media (max-width: 992px) {
+    min-height: 0;
+    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+    height: calc(var(--vh, 1vh) * 100);
+    overflow: hidden;
+  }
+}
+.return {
+  position: fixed;
+  z-index: 99;
+  .icon {
+    width: 38px;
+    height: 38px;
+    position: absolute;
+    z-index: 30;
+    padding: 0.95238rem 2.77778vw;
+    svg {
+      width: 38px;
+      height: 38px;
+      path {
+        fill: #afa2ba !important;
+        stroke: #afa2ba !important;
+        transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+    &:hover {
+      cursor: pointer;
+      svg,
+      path {
+        fill: #1ad3d9 !important;
+        stroke: #1ad3d9 !important;
+      }
+    }
+    &:active {
+      svg {
+        transform: scale(0.9);
+      }
+    }
+  }
+}
+</style>