@tiddh/brave-vue 1.93.237 → 1.93.239

package/dist/src/Card/CatalogProduct.stories.js

@@ -154,6 +154,13 @@ const planner = {
 
 var emUso = planner;
 
+
+// productColor
+// productImage
+// productType
+// productFormat
+// prodcutProtagonist
+
 export const Basic = () => ({
 	components: { CatalogProduct },
 	props: {
@@ -166,6 +173,11 @@ export const Basic = () => ({
 		<div class="storybook-14" style="background-color: #ccc; width:100%; padding:48px;">
 			<CatalogProduct
 				:product="product"
+				:productColor="product.color"
+				:productImage="product.coverImageUrl"
+				:productType="product.tagSpecs.productType"
+				:productFormat="product.tagSpecs.productFormat"
+				:productProtagonist="product.protagonist"
 				textCta="Texto"
 			/>
 		</div>

package/dist/src/Card/CatalogProduct.vue

@@ -192,6 +192,37 @@ export default {
       required: true,
     },
 
+    productColor: {
+      type: String,
+      required: true,
+    },
+
+    productImage: {
+      type: String,
+      required: true,
+    },
+
+    productType: {
+      type: String,
+      required: true,
+    },
+
+    productFormat: {
+      type: String,
+      required: true,
+    },
+
+    productProtagonist: {
+      type: String,
+      required: true,
+    },
+
+    //     productColor
+    // productImage
+    // productType
+    // productFormat
+    // prodcutProtagonist
+
     textCta: {
       type: String,
       required: false,
@@ -204,51 +235,51 @@ export default {
       gridView: true,
       observer: null,
       isMobile: false,
-      productColor: "rgb(23, 184, 188)",
-      productImage: "",
-      productType: null,
-      productFormat: "retangular",
+      //productColor: "rgb(23, 184, 188)",
+      //productImage: "",
+      //productType: null,
+      //productFormat: "retangular",
     };
   },
 
-  created() {
+  mounted() {
     const self = this;
 
     self.isMobile = self.detectSize();
 
-    document.addEventListener("resize", function (e) {
+    window.addEventListener("resize", function (e) {
       self.isMobile = self.detectSize();
     });
 
     // 1 - Detectar se o produto tem cor
-    if (self.product.color) {
-      self.productColor = self.product.color;
-    }
-
-    // 2 - Detectar objeto da imagem e aplicar
-    if (self.product.coverImage2xUrl) {
-      self.productImage = self.product.coverImage2xUrl;
-    }
-
-    if (
-      self.product.productDisplayDetails &&
-      self.product.productDisplayDetails.coverImage
-    ) {
-      self.productImage = self.product.productDisplayDetails.coverImage;
-    }
-
-    // 3 - Detectar o tipo de produto
-    if (self.product.tagSpecs && self.product.tagSpecs.productType) {
-      self.productType = self.product.tagSpecs.productType;
-    }
+    // if (self.product.color) {
+    //   self.productColor = self.product.color;
+    // }
+
+    // // 2 - Detectar objeto da imagem e aplicar
+    // if (self.product.coverImage2xUrl) {
+    //   self.productImage = self.product.coverImage2xUrl;
+    // }
+
+    // if (
+    //   self.product.productDisplayDetails &&
+    //   self.product.productDisplayDetails.coverImage
+    // ) {
+    //   self.productImage = self.product.productDisplayDetails.coverImage;
+    // }
+
+    // // 3 - Detectar o tipo de produto
+    // if (self.product.tagSpecs && self.product.tagSpecs.productType) {
+    //   self.productType = self.product.tagSpecs.productType;
+    // }
 
     //console.log("tagSpecs 1", self.product.tagSpecs);
 
-    if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
-      //console.log("tagSpecs", self.product.tagSpecs);
+    // if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
+    //   //console.log("tagSpecs", self.product.tagSpecs);
 
-      self.productFormat = self.product.tagSpecs.productFormat;
-    }
+    //   self.productFormat = self.product.tagSpecs.productFormat;
+    // }
   },
 
   methods: {
@@ -270,7 +301,7 @@ export default {
 
     detectSize() {
       var menuStatus = false;
-      if (document.innerWidth < 990) {
+      if (window.innerWidth < 990) {
         menuStatus = true;
       }
       return menuStatus;

package/dist/src/CatalogProduct.stories.js

@@ -154,6 +154,13 @@ const planner = {
 
 var emUso = planner;
 
+
+// productColor
+// productImage
+// productType
+// productFormat
+// prodcutProtagonist
+
 export const Basic = () => ({
 	components: { CatalogProduct },
 	props: {
@@ -166,6 +173,11 @@ export const Basic = () => ({
 		<div class="storybook-14" style="background-color: #ccc; width:100%; padding:48px;">
 			<CatalogProduct
 				:product="product"
+				:productColor="product.color"
+				:productImage="product.coverImageUrl"
+				:productType="product.tagSpecs.productType"
+				:productFormat="product.tagSpecs.productFormat"
+				:productProtagonist="product.protagonist"
 				textCta="Texto"
 			/>
 		</div>

package/dist/src/CatalogProduct.vue

@@ -192,6 +192,37 @@ export default {
       required: true,
     },
 
+    productColor: {
+      type: String,
+      required: true,
+    },
+
+    productImage: {
+      type: String,
+      required: true,
+    },
+
+    productType: {
+      type: String,
+      required: true,
+    },
+
+    productFormat: {
+      type: String,
+      required: true,
+    },
+
+    productProtagonist: {
+      type: String,
+      required: true,
+    },
+
+    //     productColor
+    // productImage
+    // productType
+    // productFormat
+    // prodcutProtagonist
+
     textCta: {
       type: String,
       required: false,
@@ -204,51 +235,51 @@ export default {
       gridView: true,
       observer: null,
       isMobile: false,
-      productColor: "rgb(23, 184, 188)",
-      productImage: "",
-      productType: null,
-      productFormat: "retangular",
+      //productColor: "rgb(23, 184, 188)",
+      //productImage: "",
+      //productType: null,
+      //productFormat: "retangular",
     };
   },
 
-  created() {
+  mounted() {
     const self = this;
 
     self.isMobile = self.detectSize();
 
-    document.addEventListener("resize", function (e) {
+    window.addEventListener("resize", function (e) {
       self.isMobile = self.detectSize();
     });
 
     // 1 - Detectar se o produto tem cor
-    if (self.product.color) {
-      self.productColor = self.product.color;
-    }
-
-    // 2 - Detectar objeto da imagem e aplicar
-    if (self.product.coverImage2xUrl) {
-      self.productImage = self.product.coverImage2xUrl;
-    }
-
-    if (
-      self.product.productDisplayDetails &&
-      self.product.productDisplayDetails.coverImage
-    ) {
-      self.productImage = self.product.productDisplayDetails.coverImage;
-    }
-
-    // 3 - Detectar o tipo de produto
-    if (self.product.tagSpecs && self.product.tagSpecs.productType) {
-      self.productType = self.product.tagSpecs.productType;
-    }
+    // if (self.product.color) {
+    //   self.productColor = self.product.color;
+    // }
+
+    // // 2 - Detectar objeto da imagem e aplicar
+    // if (self.product.coverImage2xUrl) {
+    //   self.productImage = self.product.coverImage2xUrl;
+    // }
+
+    // if (
+    //   self.product.productDisplayDetails &&
+    //   self.product.productDisplayDetails.coverImage
+    // ) {
+    //   self.productImage = self.product.productDisplayDetails.coverImage;
+    // }
+
+    // // 3 - Detectar o tipo de produto
+    // if (self.product.tagSpecs && self.product.tagSpecs.productType) {
+    //   self.productType = self.product.tagSpecs.productType;
+    // }
 
     //console.log("tagSpecs 1", self.product.tagSpecs);
 
-    if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
-      //console.log("tagSpecs", self.product.tagSpecs);
+    // if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
+    //   //console.log("tagSpecs", self.product.tagSpecs);
 
-      self.productFormat = self.product.tagSpecs.productFormat;
-    }
+    //   self.productFormat = self.product.tagSpecs.productFormat;
+    // }
   },
 
   methods: {
@@ -270,7 +301,7 @@ export default {
 
     detectSize() {
       var menuStatus = false;
-      if (document.innerWidth < 990) {
+      if (window.innerWidth < 990) {
         menuStatus = true;
       }
       return menuStatus;

package/dist/src/components/Card/CatalogProduct.stories.js

@@ -154,6 +154,13 @@ const planner = {
 
 var emUso = planner;
 
+
+// productColor
+// productImage
+// productType
+// productFormat
+// prodcutProtagonist
+
 export const Basic = () => ({
 	components: { CatalogProduct },
 	props: {
@@ -166,6 +173,11 @@ export const Basic = () => ({
 		<div class="storybook-14" style="background-color: #ccc; width:100%; padding:48px;">
 			<CatalogProduct
 				:product="product"
+				:productColor="product.color"
+				:productImage="product.coverImageUrl"
+				:productType="product.tagSpecs.productType"
+				:productFormat="product.tagSpecs.productFormat"
+				:productProtagonist="product.protagonist"
 				textCta="Texto"
 			/>
 		</div>

package/dist/src/components/Card/CatalogProduct.vue

@@ -192,6 +192,37 @@ export default {
       required: true,
     },
 
+    productColor: {
+      type: String,
+      required: true,
+    },
+
+    productImage: {
+      type: String,
+      required: true,
+    },
+
+    productType: {
+      type: String,
+      required: true,
+    },
+
+    productFormat: {
+      type: String,
+      required: true,
+    },
+
+    productProtagonist: {
+      type: String,
+      required: true,
+    },
+
+    //     productColor
+    // productImage
+    // productType
+    // productFormat
+    // prodcutProtagonist
+
     textCta: {
       type: String,
       required: false,
@@ -204,51 +235,51 @@ export default {
       gridView: true,
       observer: null,
       isMobile: false,
-      productColor: "rgb(23, 184, 188)",
-      productImage: "",
-      productType: null,
-      productFormat: "retangular",
+      //productColor: "rgb(23, 184, 188)",
+      //productImage: "",
+      //productType: null,
+      //productFormat: "retangular",
     };
   },
 
-  created() {
+  mounted() {
     const self = this;
 
     self.isMobile = self.detectSize();
 
-    document.addEventListener("resize", function (e) {
+    window.addEventListener("resize", function (e) {
       self.isMobile = self.detectSize();
     });
 
     // 1 - Detectar se o produto tem cor
-    if (self.product.color) {
-      self.productColor = self.product.color;
-    }
-
-    // 2 - Detectar objeto da imagem e aplicar
-    if (self.product.coverImage2xUrl) {
-      self.productImage = self.product.coverImage2xUrl;
-    }
-
-    if (
-      self.product.productDisplayDetails &&
-      self.product.productDisplayDetails.coverImage
-    ) {
-      self.productImage = self.product.productDisplayDetails.coverImage;
-    }
-
-    // 3 - Detectar o tipo de produto
-    if (self.product.tagSpecs && self.product.tagSpecs.productType) {
-      self.productType = self.product.tagSpecs.productType;
-    }
+    // if (self.product.color) {
+    //   self.productColor = self.product.color;
+    // }
+
+    // // 2 - Detectar objeto da imagem e aplicar
+    // if (self.product.coverImage2xUrl) {
+    //   self.productImage = self.product.coverImage2xUrl;
+    // }
+
+    // if (
+    //   self.product.productDisplayDetails &&
+    //   self.product.productDisplayDetails.coverImage
+    // ) {
+    //   self.productImage = self.product.productDisplayDetails.coverImage;
+    // }
+
+    // // 3 - Detectar o tipo de produto
+    // if (self.product.tagSpecs && self.product.tagSpecs.productType) {
+    //   self.productType = self.product.tagSpecs.productType;
+    // }
 
     //console.log("tagSpecs 1", self.product.tagSpecs);
 
-    if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
-      //console.log("tagSpecs", self.product.tagSpecs);
+    // if (self.product.tagSpecs && self.product.tagSpecs.productFormat) {
+    //   //console.log("tagSpecs", self.product.tagSpecs);
 
-      self.productFormat = self.product.tagSpecs.productFormat;
-    }
+    //   self.productFormat = self.product.tagSpecs.productFormat;
+    // }
   },
 
   methods: {
@@ -270,7 +301,7 @@ export default {
 
     detectSize() {
       var menuStatus = false;
-      if (document.innerWidth < 990) {
+      if (window.innerWidth < 990) {
         menuStatus = true;
       }
       return menuStatus;

package/package.json

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