@tiddh/brave-vue 1.9.21 → 1.9.24

package/src/components/Preview/PreviewWithTools.vue

@@ -1,255 +1,259 @@
 <template>
- 
-  <div class="preview-full">
-
-    <div class="preview-desktop-area" v-if="isLoaded && !isMobile">
-      <Preview 
-        :uuid="uuid"
-        :pages="pages"
-        :age="age"
-        :product_id="product_id"
-        :typeLanguage="typeLanguage"
-      />
-    </div>
-
-    <div class="preview-mobile-area" v-if="isLoaded && isMobile">
-      <PreviewMobile 
-        :uuid="uuid"
-        :pages="pages"
-        :age="age"
-        :product_id="product_id"
-        :typeLanguage="typeLanguage"
-      />
-    </div>
-
-    <div class="preview-mobile-tools" :class="!isLoaded ? 'invisible' :''">
-      <PreviewTools 
-        v-if="have_tools"
-
-        :current_name="current_name"
-        :uuid="uuid" 
-        :slug="slug" 
-
-        :character_id="character_id" 
-        :dedication_text="dedication_text"
-        :product_id="product_id" 
-        :gender="gender" 
-
-        :have_name="have_name"
-        :have_shirt_number="have_shirt_number"
-        :have_layout="have_layout"
-        :have_birth_date="have_birth_date"
-        :have_pet="have_pet"
-
-        :typeLanguage="typeLanguage"
-
-        @isLoadingMethod="isLoadingMethod"
-        @changeUuid="changeUuid"
-      />
-    </div>
-
-  </div>  
-
+	<div class="preview-full">
+		<div class="preview-desktop-area" v-if="isLoaded && !isMobile">
+			<Preview
+				:uuid="uuid"
+				:pages="pages"
+				:age="age"
+				:product_id="product_id"
+				:typeLanguage="typeLanguage"
+			/>
+		</div>
+
+		<div class="preview-mobile-area" v-if="isLoaded && isMobile">
+			<PreviewMobile
+				:uuid="uuid"
+				:pages="pages"
+				:age="age"
+				:product_id="product_id"
+				:typeLanguage="typeLanguage"
+			/>
+		</div>
+
+		<div class="preview-mobile-tools" :class="!isLoaded ? 'invisible' : ''">
+			<PreviewTools
+				v-if="have_tools"
+				:current_name="current_name"
+				:uuid="uuid"
+				:slug="slug"
+				:character_id="character_id"
+				:dedication_text="dedication_text"
+				:product_id="product_id"
+				:gender="gender"
+				:typeLanguage="typeLanguage"
+				:preview_color="preview_color"
+				:character_position_id="character_position_id"
+				@isLoadingMethod="isLoadingMethod"
+				@changeUuid="changeUuid"
+			/>
+		</div>
+	</div>
 </template>
 
 <script>
-import Preview from "./Preview.vue"
-import PreviewMobile from "./PreviewMobile.vue"
-import PreviewTools from "./PreviewTools.vue"
-
-//const $ = jQuery
-const axios = require("axios")
-
-export default {
-  name: 'PreviewWithTools',
-  components: { Preview, PreviewMobile, PreviewTools },
-  props: {
-
-   /** Name of protagonist. `Diego` */
-    current_name: {
-      type: String,
-      required: true,
-    },
-
-    dedication_text: {
-      type: String,
-      required: false
-    },
-
-    pages: {
-      type: Number,
-      required: true,
-    },
-
-    age: {
-      type: Number,
-      required: true,
-    },
-
-    /** Product id of Builder. `595` */
-    product_id: {
-      type: Number,
-      required: true,
-    },
-    /** Character id of Builder. `57` */
-    character_id: {
-      type: Number,
-      required: true,
-    },
-    /** 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,
-    },
-
-    /** Show edit name. */
-    have_name: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show number at shirt. */
-    have_shirt_number: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show layout changes. */
-    have_layout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show Birth date. */
-    have_birth_date: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show Pet. */
-    have_pet: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    typeLanguage: {
-      type: String,
-      required: false,
-      default: "br"
-    },
-
-  },
-  data() {
-    return {
-      isLoaded: true,
-      isMobile: false,
-      
-      // uuid: "",
-      // pages: 32,
-      // age: 6,
-      // character_id: 57,
-      // product_id: 595,
-
-    }
-  },
-  mounted() {
-    const self = this
-
-    self.isMobile = self.detectSize()
-
-    window.addEventListener("resize", function(e) {
-      self.isMobile = self.detectSize()
-    })
-  },
-
-  methods: {
-    detectSize() {
-      var menuStatus = false
-      if (window.innerWidth < 990) {
-        menuStatus = true
-      }
-      return menuStatus
-    },
-
-    isLoadingMethod(payload) {
-      const self = this
-      self.isLoaded = payload
-    },
-
-    changeUuid(payload) {
-      const self = this
-      self.uuid = payload //.uuid
-      self.isLoaded = true
-    },
-
-  },
-  
-};
+	import Preview from "./Preview.vue";
+	import PreviewMobile from "./PreviewMobile.vue";
+	import PreviewTools from "./PreviewTools.vue";
+
+	//const $ = jQuery
+	const axios = require("axios");
+
+	export default {
+		name: "PreviewWithTools",
+		components: { Preview, PreviewMobile, PreviewTools },
+		props: {
+			/** Name of protagonist. `Diego` */
+			current_name: {
+				type: String,
+				required: true,
+			},
+
+			dedication_text: {
+				type: String,
+				required: false,
+			},
+
+			pages: {
+				type: Number,
+				required: true,
+			},
+
+			age: {
+				type: Number,
+				required: true,
+			},
+
+			/** 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,
+				required: true,
+			},
+
+			/** 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: "#68596e",
+				required: true,
+			},
+
+			/** Show edit name. */
+			// have_name: {
+			// 	type: Boolean,
+			// 	required: false,
+			// 	default: false,
+			// },
+
+			// /** Show number at shirt. */
+			// have_shirt_number: {
+			// 	type: Boolean,
+			// 	required: false,
+			// 	default: false,
+			// },
+
+			// /** Show layout changes. */
+			// have_layout: {
+			// 	type: Boolean,
+			// 	required: false,
+			// 	default: false,
+			// },
+
+			// /** Show Birth date. */
+			// have_birth_date: {
+			// 	type: Boolean,
+			// 	required: false,
+			// 	default: false,
+			// },
+
+			// /** Show Pet. */
+			// have_pet: {
+			// 	type: Boolean,
+			// 	required: false,
+			// 	default: false,
+			// },
+
+			typeLanguage: {
+				type: String,
+				required: false,
+				default: "br",
+			},
+		},
+		data() {
+			return {
+				isLoaded: true,
+				isMobile: false,
+
+				// uuid: "",
+				// pages: 32,
+				// age: 6,
+				// character_id: 57,
+				// product_id: 595,
+			};
+		},
+		mounted() {
+			const self = this;
+
+			self.isMobile = self.detectSize();
+
+			window.addEventListener("resize", function(e) {
+				self.isMobile = self.detectSize();
+			});
+		},
+
+		methods: {
+			detectSize() {
+				var menuStatus = false;
+				if (window.innerWidth < 990) {
+					menuStatus = true;
+				}
+				return menuStatus;
+			},
+
+			isLoadingMethod(payload) {
+				const self = this;
+				self.isLoaded = payload;
+			},
+
+			changeUuid(payload) {
+				const self = this;
+				self.uuid = payload; //.uuid
+				self.isLoaded = true;
+			},
+		},
+	};
 </script>
 
-
 <style lang="scss">
-  @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
-  .storybook {
-    &-6 {
-      width: columns('lg', 6);
-    }
-    &-12 {
-      width: columns('lg', 12);
-    }
-    &-25 {
-      width: columns('lg', 25);
-    }
-  }
-
-  .invisible{
-    opacity: 0;
-  }
-  
-  .preview-full{
-    height:100vh;
-  }
-  
-  .preview-mobile-area{
-    width:100%;
-    position:relative;
-  }
-
-  .preview-mobile-tools{
-    width:100%;
-    // position:absolute;
-    margin-top: 20px;
-
-    @media(max-width:990px){
-      position:relative;
-    }
-  }
-
-  .custom-properties{
-    position: absolute;
-    top: 30px;
-  }
-  
-</style>
+	@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+	.storybook {
+		&-6 {
+			width: columns("lg", 6);
+		}
+		&-12 {
+			width: columns("lg", 12);
+		}
+		&-25 {
+			width: columns("lg", 25);
+		}
+	}
+
+	.invisible {
+		opacity: 0;
+	}
+
+	.preview-full {
+		height: 100vh;
+	}
+
+	.preview-mobile-area {
+		width: 100%;
+		position: relative;
+	}
+
+	.preview-desktop-area {
+		position: relative;
+		z-index: 4;
+	}
+
+	.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>