@tiddh/brave-vue 1.93.282 → 1.93.283

package/dist/src/PreviewSnippet.vue

@@ -0,0 +1,555 @@
+<template>
+  <div class="preview-full">
+    <!-- <div class="top-bar-area" :dir="dir" v-if="isLoaded">
+      <TopBar
+        :breadcrumbs="breadcrumbs"
+        :steps="steps"
+        :isMobile="isMobile"
+        :have_button="true"
+        :color="isMobile ? '#afa2ba' : '#afa2ba'"
+        :preview_color="'transparent'"
+        :dir="dir"
+        :colors="colors"
+        @click="changeRoute"
+        @clickContinue="changeRouteContinue"
+      />
+    </div> -->
+
+    <div class="preview-desktop-area" v-if="isLoaded && !isMobile">
+      <PreviewSnippetHorizontal
+        :uuid="uuid"
+        :pages="pages"
+        :book_format="book_format"
+        :product_id="product_id"
+        :preview_color="preview_color"
+        :typeLanguage="typeLanguage"
+        :goToPage="currentPage"
+        :dedication_page="dedication_page"
+        :builder_apk="builder_apk"
+        @updateCurrentPage="updateCurrentPage"
+      />
+    </div>
+
+    <div class="preview-mobile-area" v-if="isLoaded && isMobile">
+      <PreviewSnippetVertical
+        :uuid="uuid"
+        :pages="pages"
+        :book_format="book_format"
+        :product_id="product_id"
+        :goToPage="currentPage"
+        :dedication_page="dedication_page"
+        :typeLanguage="typeLanguage"
+        :builder_apk="builder_apk"
+      />
+    </div>
+
+    <!-- <div class="preview-mobile-tools" :class="!isLoaded ? 'invisible' : ''">
+      <PreviewTools
+        v-show="isLoaded && have_tools"
+        :dedication_text="dedication_text"
+        :uuid="uuid"
+        :slug="slug"
+        :character_id="character_id"
+        :have_dedication="have_dedication"
+        :product_id="product_id"
+        :gender="gender"
+        :typeLanguage="typeLanguage"
+        :language="language"
+        :languages="languages"
+        :layout="currentLayout"
+        :layouts="layouts"
+        :preview_color="preview_color"
+        :character_position_id="character_position_id"
+        :typeRead="typeRead"
+        :custom_mes="custom_mes"
+        :custom_numero="custom_numero"
+        :is_created="is_created"
+        @isLoadingMethod="isLoadingMethod"
+        @changeUuid="changeUuid"
+        @changeName="changeName"
+        @changeDedication="changeDedication"
+        @changeBirthday="changeBirthday"
+        @clickContinue="changeRouteContinue"
+      />
+    </div> -->
+
+    <!-- <div class="bottom-bar-area" :dir="dir" v-if="!isMobile">
+      <BottomBar
+        v-if="isLoaded"
+        :uuid="uuid"
+        :book_brand="book_brand"
+        :book_name="book_name"
+        :preview_color="preview_color"
+        :book_format="book_format"
+        :typeLanguage="typeLanguage"
+        :dir="dir"
+        @changeUrl="changeUrl"
+      />
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { getLanguage, DEFAULT_LOCALE } from "../../locale/config";
+
+// import Preview from "./Preview.vue";
+// import PreviewMobile from "./PreviewMobile.vue";
+// import PreviewTools from "./PreviewTools.vue";
+// import TopBar from "../../Navigation/TopBar.vue";
+// import BottomBar from "./../BottomBar.vue";
+
+import PreviewSnippetHorizontal from "./PreviewSnippetHorizontal.vue";
+import PreviewSnippetVertical from "./PreviewSnippetVertical.vue";
+
+//const $ = jQuery
+const axios = require("axios");
+
+export default {
+  name: "PreviewSnippet",
+  components: { PreviewSnippetHorizontal, PreviewSnippetVertical },
+  props: {
+    /** Força formato horizontal (desktop/tablet) */
+    forceHorizontal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dedication_text: {
+      type: String,
+      required: false,
+    },
+
+    /** Product id of Builder. `595` */
+    product_id: {
+      type: Number,
+      required: true,
+    },
+    /** Character id of Builder. `57` */
+    character_id: {
+      type: Number,
+      required: true,
+    },
+
+    /** Character id of Builder. `906` */
+    character_position_id: {
+      type: [Number, String],
+      required: false,
+    },
+
+    /** Type id of Gender. `89` */
+    gender: {
+      type: String,
+      required: true,
+    },
+    /** Slug of product on builder `bb-a-grande-viagem` */
+    slug: {
+      type: String,
+      required: true,
+    },
+    /** Character uuid. `ddh5e177ff920f15` */
+    uuid: {
+      type: String,
+      required: true,
+    },
+
+    /** Show edit name. */
+    have_tools: {
+      type: Boolean,
+      required: true,
+      default: true,
+    },
+
+    /** Character uuid. `ddh5e177ff920f15` */
+    preview_color: {
+      type: String,
+      default: "#16D3DB",
+      required: false,
+    },
+
+    typeRead: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    have_dedication: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+
+    /** Show edit name. */
+    custom_numero: {
+      type: String,
+      required: false,
+    },
+
+    /** Show edit name. */
+    custom_mes: {
+      type: String,
+      required: false,
+    },
+
+    typeLanguage: {
+      type: String,
+      required: false,
+      default: DEFAULT_LOCALE,
+    },
+
+    language: {
+      type: String,
+      required: false,
+    },
+
+    languages: {
+      type: Array,
+      required: false,
+    },
+
+    layout: {
+      type: Number,
+      required: false,
+    },
+
+    layouts: {
+      type: Array,
+      required: false,
+    },
+
+    book_name: {
+      type: String,
+      required: false,
+    },
+
+    book_brand: {
+      type: String,
+      required: false,
+    },
+
+    breadcrumbs: {
+      type: Array,
+      required: false,
+    },
+
+    steps: {
+      type: Array,
+      required: false,
+    },
+
+    is_created: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    dir: {
+      type: String,
+      default: "ltr",
+      required: false,
+    },
+
+    colors: {
+      type: [Object],
+      required: false,
+      default: {
+        text: "#AFA2BA",
+        textActive: "#FFFFFF",
+        color: "#FFFFFF",
+        colorHover: "#F8F6FF",
+        colorActive: "#16d3db",
+      },
+    },
+
+    /** APK do builder (opcional) */
+    builder_apk: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isLoaded: false,
+      isMobile: false,
+      pages: 0,
+      book_format: "a4",
+      lang: null,
+      currentPage: 0,
+      dedication_page: null,
+      currentLayout: null,
+      //sidebarActive: false,
+    };
+  },
+  mounted() {
+    const self = this;
+
+    self.isMobile = self.detectSize();
+
+    window.addEventListener("resize", function (e) {
+      self.isMobile = self.detectSize();
+    });
+
+    self.lang = getLanguage(self.typeLanguage);
+    self.getProductInfo();
+
+    if (self.layout) {
+      self.currentLayout = self.layout;
+    }
+  },
+
+  methods: {
+    updateCurrentPage(payload) {
+      const self = this;
+      this.currentPage = payload;
+    },
+
+    getProductInfo() {
+      const self = this;
+      let url = this.lang.urlBuilder + "/api/products/info/" + self.product_id;
+      if (self.builder_apk) {
+        url += `?apk=${encodeURIComponent(self.builder_apk)}`;
+      }
+      axios
+        .get(url)
+        .then(function (response) {
+          self.pages = response.data.product.pages;
+          if (response.data.product.extra && response.data.product.extra.size) {
+            self.book_format = response.data.product.extra.size;
+          }
+
+          if (response.data.product.layout && self.layout) {
+            response.data.product.layout.forEach((layout, index) => {
+              if (layout.id === self.layout) {
+                //this.customizations.splice(index, 1);
+                if (
+                  layout.dedication_pages &&
+                  layout.dedication_pages.length > 0
+                ) {
+                  self.dedication_page = parseInt(
+                    response.data.product.layout[0].dedication_pages[0]
+                  );
+                }
+              }
+            });
+          }
+
+          if (
+            !self.dedication_page &&
+            response.data.product.layout &&
+            response.data.product.layout[0].id &&
+            response.data.product.layout[0].dedication_pages[0]
+          ) {
+            self.currentLayout = response.data.product.layout[0].id;
+            self.dedication_page = parseInt(
+              response.data.product.layout[0].dedication_pages[0]
+            );
+          }
+
+          self.isLoaded = true;
+        })
+
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+
+    detectSize() {
+      // Se a prop forceHorizontal estiver ativada, sempre retorna falso (desktop/horizontal)
+      if (this.forceHorizontal) {
+        return false;
+      }
+      // Detecta orientação da tela: vertical (portrait) ou horizontal (landscape)
+      if (window.matchMedia("(orientation: portrait)").matches) {
+        // Vertical (mobile)
+        return true;
+      } else {
+        // Horizontal (desktop/tablet)
+        return false;
+      }
+
+      // var menuStatus = false;
+      // if (window.innerWidth < 990) {
+      // 	menuStatus = true;
+      // }
+      // return menuStatus;
+    },
+
+    isLoadingMethod(payload) {
+      const self = this;
+      //self.isLoaded = payload;
+    },
+
+    changeUuid(payload) {
+      //console.log("uuid", payload)
+      const self = this;
+      self.isLoaded = false;
+      self.completed(payload);
+
+      this.$nextTick(() => {
+        self.isLoaded = true;
+      });
+    },
+
+    changeName(payload) {
+      const self = this;
+      self.isLoaded = false;
+      self.completed(payload);
+
+      this.$nextTick(() => {
+        self.isLoaded = true;
+      });
+
+      // setTimeout(() => {
+      // 	self.currentPage = 1;
+      // }, 4000);
+
+      self.completedName(payload);
+    },
+
+    changeDedication(payload) {
+      const self = this;
+
+      self.currentPage = 0;
+
+      self.completed(payload);
+
+      //alert("salvou");
+      setTimeout(() => {
+        //alert("Atualizou dedicas");
+        self.currentPage = 3;
+      }, 500);
+
+      self.completedDedication(payload);
+    },
+
+    changeUrl(payload) {
+      this.$emit("changeUrl", payload);
+    },
+
+    changeRoute(payload) {
+      console.log("changeRoute");
+      this.$emit("changeRoute", payload);
+    },
+
+    changeRouteContinue(payload) {
+      console.log("changeRouteContinue");
+      this.$emit("changeRouteContinue", payload);
+    },
+
+    changeBirthday(payload) {
+      // this.$emit("completedBirthday", payload);
+      this.completedBirthday(payload);
+    },
+
+    completed(payload) {
+      const self = this;
+
+      /**
+       * Função disparada ao ser finalizada customização. Recebe um objeto.
+       */
+      //self.completed(payload);
+      this.$emit("completed", payload);
+    },
+
+    completedName(payload) {
+      /**
+       * Função disparada ao ser finalizada customização. Recebe um objeto.
+       */
+      this.$emit("completedName", payload);
+    },
+
+    completedDedication(payload) {
+      /**
+       * Função disparada ao ser finalizada customização. Recebe um objeto.
+       */
+      this.$emit("completedDedication", payload);
+    },
+
+    completedBirthday(payload) {
+      /**
+       * Função disparada ao ser finalizada customização. Recebe um objeto.
+       */
+      this.$emit("completedBirthday", payload);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+
+.top-bar-area {
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+
+  @media (max-width: 990px) {
+    position: relative;
+    background-color: white;
+  }
+}
+
+body {
+  margin: 0px;
+}
+.storybook {
+  &-6 {
+    width: columns("lg", 6);
+  }
+  &-12 {
+    width: columns("lg", 12);
+  }
+  &-25 {
+    width: columns("lg", 25);
+  }
+}
+
+.invisible {
+  opacity: 0;
+}
+
+.preview-full {
+  height: 100vh;
+  background-color: #ece6ee;
+  overflow-y: hidden;
+
+  @media (max-width: 990px) {
+    overflow-y: auto;
+    height: auto;
+  }
+  //neutral medium + $opacity-intense
+}
+
+.preview-mobile-area {
+  width: 100%;
+  position: relative;
+}
+
+.preview-desktop-area {
+  position: relative;
+  z-index: 4;
+  height: 100vh;
+  //height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.preview-mobile-tools {
+  // width: 100vw;
+  // position: fixed;
+  // height: 100vh;
+  // top: 0px;
+  // left: 0px;
+  // z-index: 3;
+
+  @media (max-width: 990px) {
+    position: relative;
+    z-index: 20;
+  }
+}
+
+.custom-properties {
+  position: absolute;
+  top: 30px;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tiddh/brave-vue",
-	"version": "1.93.282",
+	"version": "1.93.283",
 	"private": false,
 	"main": "dist/brave-vue.ssr.js",
 	"browser": "dist/brave-vue.esm.js",